horzi_rai_wxa/pages/reportForm/reportForm.vue

<template>
  <view class="reportForm-container">
    <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
      <view class="content">
        <view class="hot-top" @click="goHot" v-if="wholeShowListData.IsShowList">
          <image class="hot-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/hot_icon_report.png"></image>
          <text class="sea_ipt">榜单</text>
        </view>
        <view class="search-box" @click="goSearch">
          <icon type="search" size="15" class="search_ico" />
          <text class="sea_ipt">{{ searchPlaceholderList.ReportSearch || "" }}</text>
        </view>
      </view>
      <view class="second-tabs">
        <view :class="['item', item.ChartPermissionId == tabAct_id && 'tabs-active']" v-for="(item, index) in tabBars" :key="item.ChartPermissionId" @click="toggleTab(item, index)">
          {{ item.PermissionName }}
          <view class="active" v-if="item.ChartPermissionId == tabAct_id"></view>
        </view>
      </view>
    </view>
    <!-- 内容 -->
    <view class="strategy" v-if="strategyIndex == 4">
      <view class="tab-cont-two">
        <block v-for="(item, index) in tabBarsTow" :key="item.CategoryId">
          <view :id="'__' + index" class="scroll-tab-item" :class="{ active: tabAct_idTwo == item.CategoryId }" @click.stop="toggleTabTwo(item, index)">
            {{ item.MatchTypeName }}
            <text class="reg-text" v-if="item.IsRed"></text>
          </view>
        </block>
      </view>
      <view class="row"> </view>
      <!-- 子组件 -->
      <strategy
        :strategyIndexTwo="strategyIndexTwo"
        :pageNumFather="pageNumFather"
        :matchTypeName="matchTypeName"
        :tabAct_idTwo="tabAct_idTwo"
        :isNum="isNum"
        :isSwitchover="isSwitchover"
        @hideIsred="hideIsred"
      />
    </view>
    <!-- </view> -->
    <view class="industrial_eport_one" v-else>
      <!-- 行业报告 -->
      <view class="industry" v-if="tradeList">
        <view class="industry-top">
          <view class="img-top-box">
            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/industry-ico.png"></image>
            <text>行业综述</text>
          </view>
          <view> </view>
        </view>
        <view class="industry-box" @click="isClickHandle(item.CategoryId)" v-for="item in tradeList" :key="item.CategoryId">
          <view class="box-left">
            {{ item.MatchTypeName }}
            <text v-if="item.IsRed"></text>
          </view>
          <view class="box-right">
            <text>{{ item.UpdateTime }}</text>
            <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
          </view>
        </view>
      </view>
      <view v-if="labelListData.length" :class="[labelListData.length > 9 ? 'label-content-column' : 'label-content']">
        <view @click="strategyLabelHadel(item)" :class="['item', item.Stock.length > 6 && 'item-size', 'text_oneLine']" v-for="item in labelListData" :key="item.ArticleId"> {{ item.Stock }} </view>
      </view>
      <!-- 产业报告 -->
      <view class="industry">
        <view style="height: 12rpx" v-if="!tradeList"></view>
        <view class="industry-top industry-sticky">
          <view class="img-top-box">
            <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/property_ico.png" style="height: 50rpx"></image>
            <text class="text-sub">细分产业</text>
          </view>
          <view class="checkbox-content">
            <van-checkbox-group class="checkbox-ui" :value="deepCoverFocus" @change="checkboxChange">
              <van-checkbox style="margin-right: 30rpx" name="cover" icon-size="14" shape="square">深度覆盖</van-checkbox>
              <van-checkbox name="focus" icon-size="14" shape="square">推荐关注</van-checkbox>
            </van-checkbox-group>
          </view>
        </view>
        <!-- 需要循环的地方 -->
        <view class="forindustry" v-for="item in industryList" :key="item.IndustrialManagementId">
          <!-- 火锅底料这个位置 -->
          <view class="industry-content">
            <view class="industry-box-left" @click="reportFllow(item.IndustrialManagementId)">
              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/attention_act.png" v-if="item.IsFollow"></image>
              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/attention_icon.png" v-else></image>
            </view>
            <view class="industry-box-right" @click="goIndustryReport(item.IndustrialManagementId)">
              <view class="ndustry-box-read">
                <text>{{ item.IndustryName }}</text>
                <image class="hot-icon" v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/hot_report.png" mode=""></image>
                <image v-if="item.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png" mode=""></image>
              </view>
              <view class="ndustry-box-arrow">
                <text v-if="item.IsRed" class="read"></text>
                <text class="ndustry-box-text">{{ item.UpdateTime }}</text>
                <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
              </view>
            </view>
          </view>
          <view class="content-box" @click="goIndustryReport(item.IndustrialManagementId)">
            <view class="read-more">
              <view class="industry-video-item" @click.stop="handelVideoPlay(item)" :style="{ 'background-image': 'url(' + item.IndustryVideo.BackgroundImg + ')' }" v-if="item.IndustryVideo">
                5min
                <br />
                逻辑解析
                <view class="industry-video-icon">
                  <image src="https://hzstatic.hzinsights.com/cygx/video-right-top-icon.svg"></image>
                </view>
              </view>
              <block v-if="item.IndustrialSubjectList">
                <view v-if="item.IndustryVideo" style="display: flex; flex-wrap: wrap; width: 420rpx">
                  <view v-for="val in item.IndustrialSubjectList.slice(0, 4)" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
                </view>
                <block v-if="item.IndustryVideo && item.IndustrialSubjectList.length > 4">
                  <view v-for="val in item.IndustrialSubjectList.slice(4)" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
                </block>
                <block v-if="!item.IndustryVideo">
                  <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
                </block>
              </block>
            </view>
          </view>
        </view>
        <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
      </view>
    </view>
    <u-modal
      v-model="goFollowShow"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="goFollowShowBtn"
      :show-cancel-button="isCancelBtn"
      :confirm-text="confirmText"
      @cancel="isCancelBtn = false"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <rich-text :nodes="accounts"></rich-text>
      </view>
    </u-modal>
    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
    <!-- 视频模块 -->
    <videoModule :showVideoPop="showVideoPop" :videoPopList="videoPopList" />
    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
    <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" />
  </view>
</template>

<script>
import strategy from "./components/strategy.vue";
import { Throttle, Debounce } from "@/config/util.js";
import freeCharge from "@/components/freeCharge";
import suspenButton from "@/components/suspen_button.vue";
import videoModule from "@/components/videoModule/index";
import modalDialog from "@/components/modalDialog.vue";
import { Reports } from "@/config/api.js";
let app = getApp();
export default {
  components: {
    strategy,
    freeCharge,
    suspenButton,
    videoModule,
    modalDialog,
  },
  data() {
    return {
      tabAct_id: "",
      tabAct_idTwo: "",
      tabBars: [],
      pageNumFather: "",
      shadowStyle: {
        backgroundImage: "none",
      },
      tabBarsTow: [],
      isNum: 1,
      strategyIndex: "",
      strategyIndexTwo: 0,
      isSwitchover: 1,
      tradeList: [],
      OrderColumn: "",
      industryList: [],
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      refresh: false, //正在下拉
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      haveData: true,
      totalPage: "",
      matchTypeName: "",
      deepCoverFocus: [], //深度覆盖 //推荐关注
      isScrollShow: false,
      goFollowShow: false,
      accounts: "",
      confirmText: "知道了",
      isCancelBtn: false,
      scrollLeft: 0,
      showTransition: false, //点击绝密后的隐现
      showVideoPop: false, //视频弹窗显示控制
      videoPopList: {}, // 视频信息
      isShowhasPermission: false, //  联系销售的提交申请
      applyForIsShow: false, // 提交申请
      jurisdictionList: {},
      hasPermission: "", //权限
      labelListData: [],
    };
  },
  onLoad(option) {
    this.loadList(option);
    this.initNavBar();
  },
  watch: {
    //监听tabs的变化
    tabAct_id: {
      handler() {
        this.initList();
      },
      immediate: true,
    },
  },
  methods: {
    //获取胶囊位置
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 46 + "px",
        paddingTop: menuButtonInfo.top + "px",
        paddingBottom: "4px",
      };
    },
    //获取一级事件
    getClassify() {
      Reports.getClassify().then((res) => {
        if (res.Ret !== 200) return;
        this.tabBars = res.Data.List || [];
        if (!this.tabAct_id) {
          this.tabAct_id = res.Data.List[0].ChartPermissionId;
          this.$store.dispatch("statistics", {
            PageType: "Report",
            ChartPermissionId: Number(this.tabAct_id),
          });
        }
        this.getHomeStockName();
      });
    },
    //获取二级事件
    getstrategyAll() {
      Reports.getstrategyAll().then((res) => {
        this.tabBarsTow = res.Data.List;
        if (!this.tabAct_idTwo) {
          this.tabAct_idTwo = res.Data.List[0].CategoryId;
        }
        this.matchTypeName = res.Data.List[0].MatchTypeName;
      });
    },
    //tabs切换事件
    toggleTab(item, index) {
      this.strategyIndex = index;
      this.deepCoverFocus = [];
      this.labelListData = [];
      if (this.tabAct_id !== item.ChartPermissionId) {
        this.tabAct_id = item.ChartPermissionId;
        this.$store.dispatch("statistics", {
          PageType: "Report",
          ChartPermissionId: Number(this.tabAct_id),
        });
        this.getHomeStockName();
        this.pageNum = 1;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      }
    },
    scrollMove(e) {
      this.scrollLeft = e.detail.scrollLeft;
    },
    //tabs切换二级事件
    toggleTabTwo(item, index) {
      this.matchTypeName = item.MatchTypeName;
      this.strategyIndexTwo = index;
      if (this.tabAct_idTwo !== item.CategoryId) {
        this.tabAct_idTwo = item.CategoryId;
        this.pageNum = 1;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      }
    },
    //获取报告所有品种接口
    getTradeList() {
      Reports.getTradeList({
        ChartPermissionId: this.tabAct_id,
      }).then((res) => {
        if (res.Ret == 200) {
          this.tradeList = res.Data.List || [];
        }
      });
    },
    //获取产业报告所有品种接口
    getIndustryList() {
      Reports.getIndustryList({
        ChartPermissionId: this.tabAct_id,
        OrderColumn: this.OrderColumn,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        DeepCover: this.deepCoverFocus.includes("cover") ? 1 : 0,
        RecommendFocus: this.deepCoverFocus.includes("focus") ? 1 : 0,
      }).then((res) => {
        // this.industryList=res.Data.List
        this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
        this.totalPage = res.Data.Paging.Pages; //总页数
        if (this.page_no === 1) {
          this.industryList = res.Data.List || [];
          this.haveData = this.industryList.length ? true : false;
          if (this.refresh) {
            uni.stopPullDownRefresh();
            this.refresh = false;
          }
        } else {
          this.industryList = this.industryList.concat(res.Data.List);
        }
      });
    },
    //跳转季度策略
    async isClickHandle(id) {
      await this.$store.dispatch("checkHandle", "/reportPages/industrialReport/industrialReport?id=" + id);
    },
    //跳转产业报告
    async goIndustryReport(id) {
      await this.$store.dispatch("checkHandle", "/reportPages/IndustryReport/IndustryReport?id=" + id);
    },
    //点击关注的图标
    reportFllow(id) {
      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
        Reports.reportFllow({
          IndustrialManagementId: id,
        }).then((res) => {
          if (res.Ret === 200) {
            if (res.Data.Status == 1) {
              this.goFollowShow = true;
              this.confirmText = res.Data.GoFollow ? "去关注" : "知道了";
              if (res.Data.GoFollow) {
                this.accounts = `产业关注成功 <br> 想要及时获取该产业内容的更新推送，请关注【查研观向小助手】公众号`;
                this.isCancelBtn = true;
              } else {
                this.accounts = "产业关注成功<br>请关注【查研观向小助手】公众号，及时获取产业报告更新提醒";
              }
            }
            this.industryList.forEach((key) => {
              if (key.IndustrialManagementId == id) {
                if (key.IsFollow == 1) {
                  key.IsFollow = 0;
                  uni.showToast({
                    title: "已取消关注",
                    icon: "none",
                    duration: 2000,
                  });
                } else {
                  key.IsFollow = 1;
                }
              }
            });
          }
        });
      } else if (this.$store.state.isAuth) {
        //未授权
        uni.navigateTo({
          url: "/pageMy/authGuide/authGuide",
        });
      } else if (!this.$store.state.isAuth && this.$store.state.isBind) {
        //已授权未绑定
        uni.navigateTo({
          url: "/pageMy/login/login",
        });
      }
    },
    goFollowShowBtn() {
      if (this.confirmText == "去关注") {
        uni.navigateTo({
          url: "/activityPages/accountsOfficial/accountsOfficial",
        });
      }
      this.goFollowShow = false;
    },
    hideIsred(is) {
      this.tabBarsTow[this.strategyIndexTwo].IsRed = is;
    },
    /* 搜索 */
    async goSearch() {
      await this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?id=报告");
    },
    /* 初始 */
    initList() {
      if (this.tabAct_id && this.strategyIndex !== 4 && this.strategyIndex !== 5) {
        this.page_no = 1;
        this.refresh = true;
        this.getIndustryList();
        this.getTradeList();
      }
      this.strategyIndex == 4 ? this.getstrategyAll() : (this.tabAct_idTwo = "");
      this.isNum = 1;
    },
    /* 页面加载 */
    loadList(option) {
      app.globalData.isSx = true;
      this.tabAct_id = option.tab || "";
      if (option.tabs !== "" && option.tabs) {
        this.strategyIndex = 4;
        this.tabAct_idTwo = option.tabs;
      }
      if (this.tabAct_id == 31) {
        this.strategyIndex = 5;
      }
      this.getClassify();
    },
    goSecretDetail(type) {
      uni.navigateTo({
        url: "/reportPages/secretDetails/secretDetails?type=" + type,
      });
    },
    /* 跳转榜单 */
    goHot() {
      uni.navigateTo({
        url: "/reportPages/hotList/hotList",
      });
    },
    //点击了checkbox
    checkboxChange(e) {
      this.deepCoverFocus = e.detail;
      this.page_no = 1;
      this.getIndustryList();
    },
    // 视频播放权限判断
    handelVideoPlay(item) {
      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
        if (item.AuthInfo.HasPermission == 1) {
          this.playVideo(item);
        } else {
          this.hasPermission = item.AuthInfo.HasPermission;
          this.jurisdictionList.ActivityId = item.IndustryVideo.Id;
          this.jurisdictionList.isAudioVideo = 3;
          if (this.hasPermission == 2) {
            this.jurisdictionList.SellerMobile = item.AuthInfo.SellerMobile;
            this.jurisdictionList.SellerName = item.AuthInfo.SellerName;
            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
            this.isShowhasPermission = true;
          } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
            this.jurisdictionList.PopupMsg = item.AuthInfo.PopupMsg;
            this.applyForIsShow = true;
          }
        }
      } else {
        this.$store.dispatch("checkHandle");
      }
    },
    playVideo(item) {
      let params = {
        Id: item.IndustryVideo.Id,
        ResourceUrl: item.IndustryVideo.ResourceUrl,
        BackgroundImg: item.IndustryVideo.BackgroundImg,
        Title: `5min【${item.IndustryName}】逻辑解析`,
      };
      if (this.$store.state.videoPlay.playVideoId != item.Id) {
        this.$store.commit("videoPlay/palyTimeUpdate", 0);
        this.$store.commit("videoPlay/playVideo", item.Id);
      }
      // console.log(params);
      this.globalBgAudioManager.stop();
      this.videoPopList = params;
      this.showVideoPop = true;
    },
    // 获取产业下的标签
    async getHomeStockName() {
      const res = await Reports.getHomeStockName({
        ChartPermissionId: this.tabAct_id,
      });
      if (res.Ret === 200) {
        this.labelListData = res.Data.List || [];
      }
    },

    // 策略平台的 标签 点击事件
    strategyLabelHadel(item) {
      //去往文章详情页面
      this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
    },
  },
  /* 触底 */
  onReachBottom: Throttle(function () {
    if (this.strategyIndex == 4) {
      this.isNum++;
      return;
    }
    if (this.status === "nomore") return;
    this.status = "loading";
    this.page_no++;
    this.getIndustryList();
  }),
  /* 下拉刷新 */
  onPullDownRefresh: Throttle(function () {
    if (this.strategyIndex == 4) {
      this.pageNumFather = 1;
    } else {
      this.industryList = [];
      this.pageNumFather = null;
      this.page_no = 1;
      this.refresh = true;
      this.getIndustryList();
      this.getTradeList();
    }
    wx.stopPullDownRefresh();
  }),
  onShow() {
    this.$store.dispatch("checkHandle", "noGO");
    if (this.tabAct_id) {
      this.$store.dispatch("statistics", {
        PageType: "Report",
        ChartPermissionId: Number(this.tabAct_id),
      });
    }
    if (this.tabAct_id && app.globalData.isSx) {
      this.getTradeList();
    }
  },
  /**
   * 用户点击分享
   */
  onShareAppMessage: function (res) {
    return {
      title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : "产业报告",
      path: "/pages/reportForm/reportForm?tab=" + this.tabAct_id + "&tabs=" + this.tabAct_idTwo,
      success: (res) => {},
      fail: (err) => {},
    };
  },

  onHide() {
    if (this.showTransition) {
      this.showTransition = false;
    }
    if (this.strategyIndex == 4 || this.strategyIndex == 5) return;
  },
};
</script>
<style lang="scss">
@import "./index.scss";
.reportForm-container {
  .nav-bar-wrap {
    background-color: #fff;
    color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    padding-left: 30rpx;
    .content {
      position: relative;
      display: flex;
      align-items: center;
      width: 70%;
      height: 63rpx;
      margin-bottom: 20rpx;

      .hot-top {
        display: flex;
        align-items: center;
        width: 140rpx;
        height: 100%;
        color: #3385ff;
        font-size: 30rpx;
        flex-shrink: 0;
        .hot-img {
          width: 28rpx;
          height: 28rpx;
        }
      }
      .search-box {
        display: flex;
        align-items: center;
        flex: 1;
        height: 100%;
        font-size: 30rpx;
        color: #8d8d8d;
        background-color: #f6f6f6;
        padding-left: 33rpx;
        border-radius: 70rpx;
        // border: 1rpx solid #e5e5e5;
      }
      .sea_ipt {
        padding-left: 15rpx;
      }
    }
    .second-tabs {
      width: 100%;
      display: flex;
      overflow-x: auto;
      background-color: #fff;
      font-size: 34rpx;
      color: #999999;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }
      .item {
        position: relative;
        padding-bottom: 16rpx;
        margin-right: 50rpx;
        flex-shrink: 0;
        .limit-img {
          position: absolute;
          top: -15rpx;
          right: -50rpx;
          z-index: 99;
        }
        .active {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 4rpx;
          width: 100%;
          border-radius: 1rpx;
          background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
        }
      }
      .tabs-active {
        color: #3385ff;
        font-weight: 500;
      }
      .tabs-img {
        width: 46rpx;
        height: 26rpx;
      }
    }
  }
  .label-content {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 30rpx 30rpx 0rpx 80rpx;
    margin: 20rpx 0 0;
    .item {
      margin-bottom: 20px !important;
    }
  }
  .label-content-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    overflow: hidden;
    padding: 30rpx 30rpx 0;
    overflow-x: auto;
    height: 258rpx;
    margin: 20rpx 0 0;
    background-color: #fff;
    justify-content: space-between;
    &::after {
      content: "";
      width: 0rpx;
      height: 46rpx;
    }
  }
  .label-content .item,
  .label-content-column .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 40rpx;
    margin-bottom: 10px;
    width: 170rpx;
    height: 46rpx;
    background: #f5f5f5;
    box-shadow: 0px 2rpx 9rpx 0rpx rgba(0, 0, 0, 0.16), inset 0rpx 4rpx 4rpx 0rpx rgba(255, 255, 255, 0.49);
    border-radius: 65rpx;
    font-size: 26rpx;
  }
  .label-content .item,
  .label-content-column .item-size {
    font-size: 24rpx;
  }
}
.content-intimate {
  position: fixed;
  display: flex;
  align-items: center;
  bottom: 96rpx;
  right: 41rpx;
  height: 156rpx;
  .content {
    width: 432rpx;
    height: 112rpx;
    background-color: #fff;
    display: flex;
    border-radius: 56rpx;
    overflow: hidden;
    .cont-border {
      margin: 0 2rpx;
    }
    view {
      flex: 1;
      background-color: #3385ff;
      font-size: 30rpx;
      color: #fff;
      padding-top: 15rpx;
      text-align: center;
    }
  }

  image {
    width: 156rpx;
    height: 100%;
    z-index: 99;
  }
}
.new-recommend {
  width: 220rpx;
  height: 51rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #999999;
  font-size: 24rpx;
  background-color: #f8f8fa;
  border-radius: 47rpx;
  margin: auto 0;
  overflow: hidden;
  text {
    height: 51rpx;
    line-height: 51rpx;
    width: 120rpx;
    text-align: center;
  }
  .items-act {
    background-color: #3385ff;
    color: #fff;
    border-radius: 47rpx;
  }
}
</style>