Web_QiCaiYao/pages/customer_news/index.vue

<template>
  <div class="index wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>客服消息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>
<script>
import Setting from "~/setting";
export default {
  auth: false,
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      newsVal: "",
      isTabs: true,
    };
  },
  methods: {
    handleClick() {
      this.isTabs = !this.isTabs;
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  .crumbs {
    margin: 20px 0;
  }
  .newsBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .news_left {
      width: 258px;
      min-height: 582px;
      background: #ffffff;
      border-radius: 4px;
      padding: 30px 20px;
      .userInfo {
        margin: 0 auto;
        margin-bottom: 15px;
        img {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          margin: 15px auto;
        }
        p {
          text-align: center;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 16px;
        }
      }
      .platform {
        display: flex;

        .platform_icon {
          width: 42px;
          height: 42px;
          background: #d9f6ff;
          border-radius: 50%;
          margin-right: 10px;
          img {
            width: 26px;
            height: 26px;
            padding: 8px;
          }
        }
        .platform_txt {
          .platform_txt_name,
          .platform_txt_p {
            width: 180px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .platform_txt_name {
            color: #222222;
            .badge {
              margin-top: 5px;
            }
          }
          .platform_txt_p {
            color: #999999;
          }
        }
      }

      /deep/ .tabBtn {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 10px;
        .el-button {
          width: 60px;
          color: #222;
          border-radius: 0;
        }
        .tabActive {
          border-bottom: 2px solid #409eff;
          color: #409eff;
        }
      }
    }
  }

  .news_nav_img {
    width: 42px;
    height: 42px;
    background: #d9f6ff;
    border-radius: 50%;
    img {
      width: 26px;
      height: 26px;
      padding: 8px;
    }
  }

  .news_right {
    width: 922px;
    min-height: 582px;
    background: #ffffff;
    border-radius: 4px;
    .news_content {
      padding: 30px;
      .news_nav {
        display: flex;
        padding-bottom: 15px;
        border-bottom: 2px solid #eee;

        p {
          height: 42px;
          line-height: 42px;
          color: #222;
        }
      }
      .news_talk {
        min-height: 320px;
        border-bottom: 2px solid #f0f0f0;
        .news_talk_left {
          display: flex;
          .news_nav_img {
            margin-top: 15px;
            margin-right: 10px;
          }
          #talk {
            max-width: 740px;
            min-height: 42px;
            line-height: 30px;
            background: #f0f0f0;
            position: relative;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 0 10px;
            margin: 15px 0;
            margin-left: 10px;
          }
          #talk:before {
            content: "";
            position: absolute;
            right: 100%;
            top: 16px;
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-right: 14px solid #f0f0f0;
            border-bottom: 7px solid transparent;
          }
        }
        .news_talk_right {
          display: flex;
          flex-direction: row-reverse;
          .news_nav_img {
            margin-top: 15px;
            margin-left: 20px;

            background: none;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          #talk {
            max-width: 740px;
            min-height: 42px;
            line-height: 30px;
            background: #00d740;
            position: relative;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 0 10px;
            margin: 15px 0;
            margin-left: 10px;
          }
          #talk:after {
            content: "";
            position: absolute;
            left: 100%;
            top: 16px;
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-left: 14px solid #00d740;
            border-bottom: 7px solid transparent;
          }
        }
      }
    }
  }

  .news_submit {
    .news_submit_nav {
      display: flex;
      justify-content: space-between;
      .news_submit_nav_left {
        display: flex;
        img {
          width: 25px;
          height: 25px;
          margin: 15px;
        }
      }
      .news_submit_nav_right {
        margin: 15px;
      }
    }
  }
}
</style>