konggang-city-miniprogram/pages/index/index.vue

<template>
  <view class="content">
    <top-title
      :titleValue="title"
      :pageScroll="scrollVal"
	  :btnTop="btnPos"
      style="width: 100%"
    ></top-title>
    <view class="page-section-spacing" style="width: 100%; position: relative">
      <swiper
        class="swiper"
        indicator-dots="false"
        autoplay="true"
        duration="500"
        style="height: 440rpx"
        @change="swiperChange"
      >
        <swiper-item
          v-for="(item, index) in swiperList"
          :key="index"
          class="swiper-content"
        >
          <image
            :src="item.pic_path"
            mode="aspectFill"
            style="width: 100%; height: 100%"
          ></image>
        </swiper-item>
      </swiper>
      <image src="../../static/Intersect.svg" class="groove-img"></image>
      <view class="rowDot">
        <view v-for="(item, index) in swiperList" :key="index" class="dots">
          <view
            :class="['dot', index === swiperCurrent ? 'active' : '']"
          ></view>
        </view>
      </view>
    </view>

    <view class="page-nav-box">
      <navigator
        v-for="(item, index) in navList"
        :key="index"
        :url="item.path"
        open-type="navigate"
        class="nav-content"
      >
        <image
          :src="item.url"
          mode="aspectFit"
          style="width: 38px; height: 38px"
        ></image>
        <view>{{ item.content }}</view>
      </navigator>
    </view>

    <view class="notice-box" style="width:90%;">
      <view class="notice-title-box" style="margin: 0 auto;margin-bottom: 30rpx;">
        <view class="notice-font">通知公告</view>
        <view class="notice-more-font">
          <view style="margin-right: 8rpx; font-size: 26rpx" @click="goNotice">更多</view>
          <image src="../../static/right-arrow-blue.png"mode="aspectFill" style="width: 12rpx; height: 16rpx"></image>
        </view>
      </view>
      <view
        class="notice-content-box"
        style="justify-content: flex-start;border-radius: 0;"
        v-for="(item, index) in noticeList"
        :key="index"
        @click="goNoticeDeatil(item.id)"
      >
        <image
          :src="item.icon"
          mode="aspectFit"
          style="width:80rpx; height:80rpx"
        ></image>
        <view class="notice-content display-around-column" style="width: 85%">
          <view class="notice-content-font" style="margin-left: 30rpx">{{
            item.title
          }}</view>
          <view class="notice-content-time" style="margin-left: 30rpx">{{
            item.publish_time | globalTime
          }}</view>
        </view>
      </view>
    </view>

    <view class="notice-box" style="margin-top: 40rpx;width: 90%;">
      <view class="notice-title-box">
        <view class="notice-font">推荐园区</view>
        <navigator
          class="notice-more-font"
          url="../park/index"
          open-type="navigate"
        >
          <view style="margin-right: 8rpx; font-size:26rpx">更多</view>
          <image
            src="/static/right-arrow-blue.png"
            mode="aspectFill"
            style="width: 12rpx; height: 16rpx"
          ></image>
        </navigator>
      </view>
      <view
        class="display-flex-start"
        style="overflow-x: scroll; overflow-y: hidden; position: relative"
      >
        <view
          class="park-box"
          v-for="item in parkList"
          :key="item.id"
          @click="goParkDetailFn(item.id)"
        >
          <image
            :src="item.park_pics[0].pic_path || '/static/park/1.png'"
            mode="aspectFill"
            style="
              width: 452rpx;
              height: 250rpx;
              border-radius: 32rpx 32rpx 0 0;
            "
          ></image>
          <view class="park-content-box">
            <view class="park-title">{{ item.name }}</view>
            <view class="park-address display-flex-start">
              <view class="display-flex-start" style="margin-right: 10rpx"
                ><image
                  src="/static/park/park-time.png"
                  mode="aspectFill"
                  class="park-title-img"
                ></image
                >{{ item.addtime | globalTime }}建成</view
              >
              <view class="display-flex-start"
                ><image
                  src="/static/park/park-name.png"
                  mode="aspectFill"
                  class="park-title-img"
                ></image
                >{{ item.manager }}</view
              >
            </view>
            <view class="park-footer-box display-between">
              <view class="display-between-column width-30">
                <view class="display-flex-start"
                  ><image
                    src="/static/park/park-num.png"
                    mode="aspectFill"
                    class="park-footer-img"
                  ></image
                  >{{ item.company_count }}</view
                >
                <view class="park-footer-font">企业数量</view>
              </view>
              <view class="display-between-column width-30">
                <view class="display-flex-start">
                  <image
                    src="/static/park/park-area.png"
                    mode="aspectFill"
                    class="park-footer-img"
                  ></image>
                  {{ item.cover_area
                  }}<text style="font-size: 14rpx">亩</text></view
                >
                <view class="park-footer-font">占地面积</view>
              </view>
              <view class="display-between-column" style="width: 33%;">
                <view class="display-flex-start">
                  <image
                    src="/static/park/park-area2.png"
                    mode="aspectFill"
                    class="park-footer-img"
                  ></image>
                  {{ item.building_area
                  }}<text style="font-size: 14rpx">万㎡</text></view
                >
                <view class="park-footer-font">建设面积</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="notice-box" style="margin-top: 20rpx;width: 90%;">
      <view class="notice-title-box" style="margin: 0 auto;margin-bottom: 30rpx;">
        <view class="notice-font">招商专区</view>
        <view class="notice-more-font">
          <view style="margin-right: 8rpx; font-size: 26rpx" @click="goAttract"
            >更多</view
          >
          <image
            src="/static/right-arrow-blue.png"
            mode="aspectFill"
            style="width: 12rpx; height: 16rpx"
          ></image>
        </view>
      </view>

      <view
        class="notice-content-box"
        v-for="(item, index) in attractList"
        :key="index"
        style="justify-content: start; position: relative;border-radius: 0;"
        @click="goAttractDeatil(item.id, item.time_type)"
      >
        <view class="maskModal" v-if="item.time_type == 0">
          <text>敬请期待</text>
        </view>
        <image
          :src="item.pic_url"
          mode="aspectFill"
          style="
            width: 112rpx;
            height: 112rpx;
            margin-right: 20rpx;
            border-radius: 10rpx;
          "
        ></image>
        <view class="notice-content" style="width: 75%">
          <view class="notice-content-font">{{ item.title }}</view>
          <view class="attract-content">{{ item.desc }}</view>
          <view
            class="notice-content-time"
            style="margin-top: 20rpx; font-size: 26rpx"
            v-if="item.time_type == 1"
            >{{ item.time | globalTime }}</view
          >
          <view
            class="notice-content-time"
            style="margin-top: 20rpx; font-size: 26rpx"
            v-else
            >时间：待定</view
          >
        </view>
      </view>
    </view>

    <view class="notice-box" style="margin-top: 40rpx;width:90%;">
      <view class="notice-title-box" style="margin: 0 auto;margin-bottom: 30rpx;">
        <view class="notice-font">区内活动</view>
        <view class="notice-more-font">
          <view style="margin-right: 8rpx; font-size: 26rpx" @click="goActive"
            >更多</view
          >
          <image
            src="/static/right-arrow-blue.png"
            mode="aspectFill"
            style="width: 12rpx; height: 16rpx"
          ></image>
        </view>
      </view>

      <view
        class="notice-content-box"
        v-for="(item, index) in activityList"
        :key="index"
        style="justify-content: start; padding: 30rpx 0 30rpx 30rpx;border-radius: 0;"
        @click="goActiveDeatil(item.id)"
      >
        <image
          :src="item.url"
          style="
            width: 112rpx;
            height: 112rpx;
            margin-right: 20rpx;
            border-radius: 10%;
          "
        ></image>
        <view class="notice-content" style="width: 75%">
          <view class="notice-content-font">{{
            item.title
          }}</view>
          <view class="display-flex-start" style="margin-top: 20rpx">
            <view
              class="notice-content-time display-flex-start color-a7adba"
              v-show="item.isOnline"
              ><view class="online-box"></view>线上</view
            >
            <view
              class="notice-content-time display-flex-start color-a7adba"
              v-show="!item.isOnline"
              ><view class="offline-box"></view>线下</view
            >
            <view class="notice-content-time color-a7adba">{{
              item.department
            }}</view>
            <view class="notice-content-time color-a7adba">{{
              item.time
            }}</view>
          </view>
          <view class="display-flex-end" style="margin-top: 20rpx">
            <view class="notice-content-time">浏览 {{ item.browe }}</view>
            <view class="notice-content-time">分享 {{ item.share }}</view>
          </view>
        </view>
      </view>
    </view>
    <foot-tabs :selectedIndex="0" :isShow="footFlag"></foot-tabs>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import topTitle from "@/components/top-title/top-title.vue";
import footTabs from "@/components/foot-tabs/footTabs.vue";
export default {
  components: {
    "foot-tabs": footTabs,
    "top-title": topTitle,
  },
  data() {
    return {
      title: "Air企通",
      scrollVal: Number,
      footFlag: true,
	  btnPos:uni.getMenuButtonBoundingClientRect().top + 6,
      swiperList: [
        {
          img: "/static/swiper/swiper1.jpg",
        },
        {
          img: "/static/swiper/swiper2.jpg",
        },
      ],
      swiperCurrent: 0,
      navList: [
        {
          url: "/static/navList/appeal.png",
          path: "/pages/appeal/index",
          content: "提诉求",
        },
        {
          url: "/static/navList/policy.png",
          path: "/pages/policy/index",
          content: "搜政策",
        },
        {
          url: "/static/navList/park.png",
          path: "/pages/park/index",
          content: "找园区",
        },
        {
          url: "/static/navList/activity.png",
          path: "/pages/activity/index",
          content: "找活动",
        },
        {
          url: "/static/navList/supply.png",
          path: "/pages/supply/index",
          content: "发供需",
        },
        {
          url: "/static/navList/enterprise.png",
          path: "/pages/enterprise/index",
          content: "查企业",
        },
        {
          url: "/static/navList/service.png",
          path: "/pages/service/index",
          content: "找服务",
        },
      ],
      noticeList: [
        // {
        //   url: "/static/navList/policy-icon.png",
        //   title: "政策速览 | 小微企业、个体工商户税费...",
        //   time: "2021-08-05",
        // },
        // {
        //   url: "/static/navList/activity-icon.png",
        //   title: "活动预告 | 想了解跨境电商？8月5日带...",
        //   time: "2021-08-04",
        // },
        // {
        //   url: "/static/navList/notice-icon.png",
        //   title: "通知公告 | 2022年首批次重点新材料扶...",
        //   time: "2021-08-03",
        // },
      ],
      parkList: [
        // {
        // 	url:'/static/park/1.png',
        // 	title:'华潮科技产业园',
        // 	time:'2015-10-25',
        // 	num:484,
        // 	area1:1.72,
        // 	area2:1.01
        // },
        // {
        // 	url:'/static/park/1.png',
        // 	title:'华潮科技产业园',
        // 	time:'2015-10-25',
        // 	num:484,
        // 	area1:1.72,
        // 	area2:1.01
        // },
        // {
        // 	url:'/static/park/1.png',
        // 	title:'华潮科技产业园',
        // 	time:'2015-10-25',
        // 	num:484,
        // 	area1:1.72,
        // 	area2:1.01
        // },
      ],
      attractList: [
        // {
        //   url: "/static/attract/1.png",
        //   title: "工业互联网",
        //   subtitle: "工业互联网是全球工业系统与高级计算、分析、...",
        //   time: "2021-09-05",
        // },
        // {
        //   url: "/static/attract/2.png",
        //   title: "生产性服务业",
        //   subtitle: "生产性服务业是指为保持工业生产过程的连续性...",
        //   time: "2021-09-05",
        // },
      ],
      activityList: [
        // {
        //   url: "/static/activity/2.png",
        //   title: "400场讲座,200门课程,免费送上门!就等你申请",
        //   isOnline: 1,
        //   department: "区人力资源局",
        //   time: "2021-09-05",
        //   browe: "322",
        //   share: "2",
        // },
        // {
        //   url: "/static/activity/1.png",
        //   title: "智能制造商标品牌培育系列培训活动",
        //   isOnline: 0,
        //   department: "市场监督管理局",
        //   time: "2021-09-05",
        //   browe: "322",
        //   share: "2",
        // },
      ],
    };
  },
  onShow() {
    uni.hideTabBar({});
    this.getActive();
  },
  onLoad() {
	  
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    this.getSwiperList();
    this.getPark();
    this.getNotice();
    this.getAttract(); //招商接口
  },
  onShareAppMessage() {
    url: "/pages/index/index";
  },
  methods: {
    swiperChange(e) {
      this.swiperCurrent = e.detail.current;
    },
    getSwiperList() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=main_pics&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          order_by: "weight desc",
          s_status: 1,
          page: 1,
          page_size: 7,
        },
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            res.data.data.list.forEach((item) => {
              item.pic_path = getApp().globalData.shareUrl + item.pic_path;
            });
            this.swiperList = res.data.data.list;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getPark() {
      let md5Sign = md5(
        "method=" +
          "park" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=park&source=park&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          order_by: "weight desc",
          s_show: 1,
          page: 1,
          page_size: 5,
        },
        success: (res) => {
          if (res.data.code === 200) {
            res.data.data.list.forEach((item) => {
              if (item.park_pics.length) {
                item.park_pics[0].pic_path =
                  getApp().globalData.shareUrl + item.park_pics[0].pic_path;
              }
            });
            this.parkList = res.data.data.list;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getNotice() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=notice&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;

      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          // order_by: "weight desc",
          // s_show: 1,
          page: 1,
          page_size:3,
        },
        success: (res) => {
          if (res.data.code === 200) {
            // console.log(res.data.data.list);
            this.noticeList = res.data.data.list.map((item) => {
              switch (item.type) {
                case "1":
                  item.icon = "/static/navList/activity-icon.png";
                  // item.title = "活动预告 | " + item.title;
                  break;
                case "2":
                  item.icon = "/static/navList/policy-icon.png";
                  // item.title = "政策速览 | " + item.title;
                  break;
                case "3":
                  item.icon = "/static/navList/notice-icon.png";
                  // item.title = "通知公告 | " + item.title;
                  break;
              }
              return item;
            });
          }
		  console.log(this.noticeList)
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getAttract() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=business&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        // page: 1,
        // page_size: 4,
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if (res.data.code === 200) {
            res.data.data.list.forEach((item) => {
              item.pic_url = getApp().globalData.shareUrl + item.pic_url;
            });
            this.attractList = res.data.data.list.filter(
              (item) => item.show != 0
            );
			this.attractList = this.attractList.length > 2 ? this.attractList.slice(0,2) : this.attractList
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    getActive() {
      let md5Sign = md5(
        "method=" +
          "common" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=common&source=activity&action=list&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      let postData = {
        page: 1,
        page_size: 2,
		s_cancel : 0
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          console.log(res);
          if (res.data.code === 200) {
            let list = res.data.data.list;
            this.activityList = list.map((item) => {
              /*
                  url: "/static/activity/2.png",
            title: "智能制造商标品牌培育系列培训活动",
            way: "市场监督管理局",
            date: "2021-08-07",
            read: 322,
            share: 1,
            type: 0, //0线下
             */
              let ob = {
                url: "",
                title: "",
                department: "",
                time: "",
                browe: 0,
                share: 0,
                type: "",
                id: "",
              };
              ob.url = getApp().globalData.shareUrl + item.pic_url;
              ob.title = item.name;
              ob.department = item.sponsor;
              ob.time = this.$options.filters["globalTime"](item.start_time);
              ob.browe =
                parseInt(item.base_read_count) + parseInt(item.real_read_count);
              ob.share =
                parseInt(item.real_repost_count) +
                parseInt(item.base_repost_count);
              ob.isOnline = item.type == 1 ? 1 : 0;
              ob.id = item.id;
              return ob;
            });
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    goParkDetailFn(id) {
      uni.navigateTo({
        url: "/pages/park/park_deatil?id=" + id,
      });
    },
    goNoticeDeatil(id) {
      uni.navigateTo({
        url: "/pages/notice/notice_deatil?id=" + id,
      });
    },
    goAttractDeatil(id, type) {
      if (type == "0") return;
      uni.navigateTo({
        url: "/pages/attract/attract_deatil?id=" + id,
      });
    },
    goActiveDeatil(id) {
      uni.navigateTo({
        url: "/pages/activity/activity_deatil?id=" + id,
      });
    },
    goAttract() {
      uni.navigateTo({
        url: "/pages/attract/index",
      });
    },
    goNotice() {
      uni.navigateTo({
        url: "/pages/notice/index",
      });
    },
    goActive() {
      uni.navigateTo({
        url: "/pages/activity/index",
      });
    },
  },
  onPageScroll(e) {
    this.scrollVal = e.scrollTop;
    if (e.scrollTop < uni.getSystemInfoSync().windowHeight) {
      this.footFlag = true;
    }
  },
  onReachBottom(e) {
    this.footFlag = false;
  },
};
</script>

<style>
.unclick {
  background-color: #bfbfbf !important;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.groove-img {
  width: 100%;
  height: 100rpx;
  bottom: -22rpx;
  position: absolute;
}
.rowDot {
  display: flex;
  position: absolute;
  top: 310rpx;
  left: 80rpx;
}
.dots {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.dot {
  margin-right: 8rpx;
  width: 40rpx;
  height: 8rpx;
  opacity: 1;
  border-radius: 6rpx;
  background: #fff5f9;
}
.dot.active {
  background: #ff4e54;
}
/* .swiper-content { */
  /* border-radius: 0 0 10% 10%; */
/* } */
.page-nav-box {
  width: 88%;
  /* height: 320rpx; */
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 10rpx 30rpx 10rpx;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
  position: absolute;
  top: 360rpx;
  background-color: #fff;
}
.nav-content {
  width: 25%;
  height: 130rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
  font-size: 28rpx;
  justify-content: space-around;
  letter-spacing: 0.02em;
  color: #0d1937;
  font-family: PingFang SC;
  font-style: normal;
  /* font-weight: 600; */
}
.notice-box {
  width: 83%;
  margin-top: 320rpx;
  margin-bottom: 20rpx;
}
.notice-title-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}
.notice-font {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: bold;
  font-size: 38rpx;
  letter-spacing: 0.02em;
  color: #0d1937;
}
.notice-more-font {
  font-size: 28rpx;
  color: #146afb;
  display: flex;
  align-items: center;
}

.notice-content-box {
  display: flex;
  padding: 30rpx 20rpx 30rpx 20rpx;
  background-color: #ffffff;
  box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
  border-radius: 32rpx;
  margin-top: 20rpx;
  justify-content: space-between;
}
.maskModal {
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 32rpx;
  height: 100%;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}
.notice-content-font {
  font-size: 32rpx;
  color: #0d1937;
  /* font-weight: 600; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice-content-time {
  font-size: 26rpx;
  letter-spacing: 0.02em;
  color: #cfcfcf;
  margin-right: 14rpx;
}
.park-box {
  border-radius: 32rpx;
  margin-right: 20rpx;
  position: relative;
  height: 480rpx;
}
.park-content-box {
  width: 394rpx;
  background-color: #ffffff;
  border-radius: 56rpx 0px 32rpx 32rpx;
  position: absolute;
  top: 210rpx;
  font-size: 30rpx;
  padding: 30rpx;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
}
.park-title {
  /* font-weight: 600; */
  line-height: 36rpx;
  letter-spacing: 0.02em;
  color: #0d1937;
}
.park-address {
  /* font-weight: 600; */
  font-size: 26rpx;
  letter-spacing: 0.02em;
  color: #cfcfcf;
  margin-top: 10rpx;
}
.park-title-img {
  width: 16rpx;
  height: 16rpx;
  margin-right: 4rpx;
}
.park-footer-box {
  margin-top: 30rpx;
}
.park-footer-img {
  width: 24rpx;
  height: 24rpx;
  margin-right: 6rpx;
}
.park-footer-font {
  color: #cfcfcf;
  font-size: 24rpx;
  margin-top: 10rpx;
}
.width-30 {
  width: 30%;
}
.attract-content {
  color: #697594;
  /* font-weight: 600; */
  font-size: 24rpx;
  margin-top: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.online-box {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #589cff;
  margin-right: 5rpx;
}
.offline-box {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #ffcf86;
  margin-right: 5rpx;
}
.color-a7adba {
  color: #a7adba;
}
</style>