horzi_rai_wxa/pages/reportForm/reportForm.vue

<template>
  <view class="reportForm-container container">
    <view id="nav-bar-wrap-id" class="nav-bar-wrap">
      <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="50">
        <template slot="content-left">
          <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/new_cygx/hot_icon_report.png"></image>
              <text class="sea_ipt">榜单</text>
            </view>
          </view>
        </template>
      </search-bar>
      <view class="global_one_tabs tabs-box">
        <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="banne-content" v-if="strategyIndex == 4">
        <swiper autoplay :interval="4000" circular>
          <view v-for="(bannerItem, index) in bannerDataList" :key="index" @click.native="bannerSwiperHandler(bannerItem)">
            <swiper-item>
              <image :src="bannerItem.IndexImg"></image>
            </swiper-item>
          </view>
        </swiper>
      </view>
      <view class="tab-cont-two">
        <view v-for="(item, index) in tabBarsTow" :key="index" class="scroll-tab-box">
          <view v-for="key in item.Items" :key="key.CategoryId" :id="'__' + index" class="scroll-tab-item" :class="{ active: tabAct_idTwo == key.CategoryId }" @click.stop="toggleTabTwo(key, index)">
            {{ key.MatchTypeName }}
            <text class="reg-text" v-if="key.IsRed"></text>
          </view>
        </view>
      </view>
      <view class="row"> </view>
      <block v-if="tabAct_idTwo != 99999">
        <!-- 子组件 -->
        <strategy
          :strategyIndexTwo="strategyIndexTwo"
          :pageNumFather="pageNumFather"
          :matchTypeName="matchTypeName"
          :tabAct_idTwo="tabAct_idTwo"
          :isNum="isNum"
          :tabAct_id="tabAct_id"
          :isSwitchover="isSwitchover"
          @hideIsred="hideIsred"
        />
      </block>
      <!-- 时间线 -->
      <block v-if="tabAct_idTwo == 99999">
        <time-line ref="timeChild" :dataList="timeLine" @setRouter="setRouter" />
        <u-loadmore :status="status" icon-type="flower" :load-text="loadText" v-if="totalPage > 1" />
      </block>
    </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/new_cygx/industry-ico.png"></image>
            <text>行业综述</text>
          </view>
          <view> </view>
        </view>
        <view class="global_card_content report_formcard_content">
          <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="#333333" size="34"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="industry-top">
        <view class="img-top-box">
          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/company_ico.png"></image>
          <text>公司速览</text>
        </view>
        <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/new_cygx/property_ico.png" style="height: 50rpx"></image>
            <text class="text-sub">细分产业</text>
          </view>
          <view class="checkbox-content">
            <view :class="['item', item.isAct && 'act-item']" v-for="item in deepCoverList" :key="item.value" @click="checkboxChange(item)">{{ item.lable }}</view>
          </view>
        </view>
        <!-- 需要循环的地方 -->
        <view class="forindustry global_card_content" v-for="item in industryList" :key="item.IndustrialManagementId" @click="goIndustryReport(item.IndustrialManagementId)">
          <image class="image-box" v-if="item.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/new_report.png"></image>
          <image class="image-box" v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/hot_report.png"></image>
          <!-- 火锅底料这个位置 -->
          <view class="industry-content">
            <view class="industry-box-left">
              <image
                class="follw-image"
                @click.stop="reportFllow(item.IndustrialManagementId)"
                :src="item.IsFollow ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collected_icon.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/not_collected.png'"
              ></image>
              <view class="global_title">{{ item.IndustryName }} </view>
            </view>
            <view class="ndustry-box-tiem global_content_center">
              <text v-if="item.IsRed" class="read"></text>
              <text class="ndustry-box-text">{{ item.UpdateTime }}</text>
              <u-icon name="arrow-right" color="#333" size="28"></u-icon>
            </view>
          </view>
          <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: 502rpx">
                <view v-for="val in item.IndustrialSubjectList.slice(0, 6)" :key="val.IndustrialSubjectId" class="text-box text_oneLine">{{ val.SubjectName }}</view>
              </view>
              <block v-if="item.IndustryVideo && item.IndustrialSubjectList.length > 6">
                <view v-for="val in item.IndustrialSubjectList.slice(6)" :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 text_oneLine">{{ val.SubjectName }}</view>
              </block>
            </block>
          </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.sync="showVideoPop" :videoPopList="videoPopList" />
    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
    <Loading />
  </view>
</template>

<script>
import strategy from "./components/strategy.vue";
import { Throttle, Debounce } from "@/config/util.js";
import freeCharge from "@/components/freeCharge";
import videoModule from "@/components/videoModule/index";
import modalDialog from "@/components/modalDialog.vue";
import SearchBar from "@/components/search-bar/searchBar.vue";
import TimeLine from "@/components/report/timeLine.vue";

import { Reports, Home } from "@/config/api.js";
let app = getApp();
export default {
  components: {
    strategy,
    freeCharge,
    videoModule,
    modalDialog,
    SearchBar,
    TimeLine,
  },
  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: [], //深度覆盖 //推荐关注
      deepCoverList: [
        {
          value: "cover",
          lable: "深度覆盖",
          isAct: false,
        },
        {
          value: "focus",
          lable: "推荐关注",
          isAct: false,
        },
      ],
      isScrollShow: false,
      goFollowShow: false,
      accounts: "",
      confirmText: "知道了",
      isCancelBtn: false,
      scrollLeft: 0,
      showTransition: false, //点击绝密后的隐现
      showVideoPop: false, //视频弹窗显示控制
      videoPopList: {}, // 视频信息
      isShowhasPermission: false, //  联系销售的提交申请
      applyForIsShow: false, // 提交申请
      jurisdictionList: {},
      hasPermission: "", //权限
      labelListData: [],
      timeLine: [], //时间线数据
      bannerDataList: [],
      bulletinData: {},
    };
  },
  onLoad(option) {
    this.loadList(option);
    this.getBannerList();
  },
  watch: {
    //监听tabs的变化
    tabAct_id: {
      handler() {
        this.initList();
      },
      immediate: true,
    },
    tabAct_idTwo: {
      handler(newVal) {
        newVal == 99999 && this.getTimeLineList();
      },
      immediate: true,
    },
  },
  methods: {
    //获取一级事件
    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();
      });
    },
    //获取二级事件
    async getstrategyAll() {
      const res =
        this.tabAct_id == 148 || this.tabAct_id == 62
          ? await Reports.getZhouQistrategyAll({
              ChartPermissionId: this.tabAct_id,
            })
          : await Reports.getstrategyAll({
              ChartPermissionId: this.tabAct_id,
            });
      if (res.Ret === 200) {
        this.tabAct_id == 23 &&
          res.Data.List.push({
            CategoryId: 100001,
            IsRed: false,
            ListGroup: 4,
            MatchTypeName: "数据思维",
            SubCategoryName: "",
          });
        if (!this.tabAct_idTwo) {
          this.tabAct_idTwo = res.Data.List[0].CategoryId;
        }

        this.matchTypeName = res.Data.List[0].MatchTypeName;
        // 使用 Map 来存储分组后的数据
        const result = new Map();

        // 将原始数据按 ListGroup 分组
        res.Data.List.forEach((item) => {
          // 如果当前 ListGroup 不存在，初始化一个新数组
          if (!result.has(item.ListGroup)) {
            result.set(item.ListGroup, []);
          }

          // 获取对应 ListGroup 的数组，并添加当前项
          const groupArray = result.get(item.ListGroup);
          groupArray.push(item);
        });

        // 如果需要将 Map 转换回普通对象或数组形式，请使用以下代码：
        const arrayResult = Array.from(result.entries()).map(([ListGroup, items]) => ({
          GroupId: ListGroup,
          Items: items, // 当前 GroupId 对应的所有项目
        }));
        this.tabBarsTow = arrayResult;
      }
    },
    //tabs切换事件
    toggleTab(item, index) {
      this.strategyIndex = index;
      console.log(this.strategyIndex);
      this.tabAct_idTwo = "";
      this.deepCoverFocus = [];
      this.labelListData = [];
      this.tabBarsTow = [];
      if (this.tabAct_id !== item.ChartPermissionId) {
        this.tabAct_id = item.ChartPermissionId;
        console.log(this.tabAct_id, "this.tabAct_id");
        this.$store.dispatch("statistics", {
          PageType: "Report",
          ChartPermissionId: Number(this.tabAct_id),
        });
        this.getHomeStockName();
        this.page_no = 1;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0,
        });
      }
    },
    scrollMove(e) {
      this.scrollLeft = e.detail.scrollLeft;
    },
    //tabs切换二级事件
    toggleTabTwo(item, index) {
      if (item.CategoryId === 100001) {
        uni.navigateTo({
          url: "/reportPages/selectedBulletin/selectedBulletin",
        });
        return;
      }
      this.matchTypeName = item.MatchTypeName;
      this.strategyIndexTwo = index;
      if (this.tabAct_idTwo !== item.CategoryId) {
        this.tabAct_idTwo = item.CategoryId;
        this.page_no = 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);
        }
      });
    },
    //跳转季度策略
    isClickHandle(id) {
      uni.navigateTo({
        url: "/reportPages/industrialReport/industrialReport?id=" + id,
      });
    },
    //跳转产业报告
    async goIndustryReport(id) {
      this.$store.commit("setRouterReport", "产业列表");
      uni.navigateTo({ url: "/reportPages/IndustryReport/IndustryReport?id=" + id });
    },
    //点击关注的图标
    async reportFllow(id) {
      await this.$store.dispatch("showLoginModal");
      const res = await Reports.reportFllow({
        IndustrialManagementId: id,
        PageRouter: "细分产业列表",
      });
      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;
            }
          }
        });
      }
    },
    goFollowShowBtn() {
      if (this.confirmText == "去关注") {
        uni.navigateTo({
          url: "/activityPages/accountsOfficial/accountsOfficial",
        });
      }
      this.goFollowShow = false;
    },
    hideIsred(is) {
      this.tabBarsTow[this.strategyIndexTwo].IsRed = is;
    },
    // h获取时间线
    async getTimeLineList() {
      const res =
        this.tabAct_id == 23
          ? await Reports.getTacticsTimeLine({
              PageSize: this.pageSize,
              CurrentIndex: this.page_no,
            })
          : await Reports.getGushowTimeLine({
              PageSize: this.pageSize,
              CurrentIndex: this.page_no,
            });
      if (res.Ret === 200) {
        this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
        this.totalPage = res.Data.Paging.Pages;
        let list = res.Data.List || [];
        list = list.map((item) => {
          let temp = item;
          temp.date = item.PublishTime.split(" ")[0];
          if (item.Content.length) {
            item.isShowBtn = item.Content.length > 60 ? true : false;
            item.isExpand = item.Content.length > 60 ? false : true;
          }
          return temp;
        });
        if (this.page_no === 1) {
          this.timeLine = list;
          this.haveData = this.timeLine.length ? true : false;
          if (this.refresh) {
            uni.stopPullDownRefresh();
            this.refresh = false;
          }
        } else {
          this.timeLine = this.timeLine.concat(list);
        }
      }
      setTimeout(() => {
        this.$refs.timeChild.loadTimeLine = true;
        this.$refs.timeChild.getConentsHeight();
      }, 0);
    },
    /* 搜索 */
    async goSearch() {
      uni.navigateTo({ url: "/pages-search/indedxSearch/indedxSearch?id=报告" + "&source=深度研究页面" });
    },
    /* 初始 */
    initList() {
      if (this.tabAct_id && this.strategyIndex < 4) {
        this.page_no = 1;
        this.refresh = true;
        this.getIndustryList();
        this.getTradeList();
      }
      this.strategyIndex >= 4 && this.getstrategyAll();
      this.isNum = 1;
    },
    /* 页面加载 */
    loadList(option) {
      app.globalData.isSx = true;
      this.strategyIndex = option.strategyIndex || "";
      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(item) {
      item.isAct = !item.isAct;
      let arr = [];
      this.deepCoverList.forEach((key) => {
        if (key.isAct) {
          arr.push(key.value);
        }
      });
      this.deepCoverFocus = arr;
      this.page_no = 1;
      this.getIndustryList();
    },
    // 视频播放权限判断
    async handelVideoPlay(item) {
      this.$store.commit("setRouterReport", "产业列表");
      await this.$store.dispatch("showLoginModal");
      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;
        }
      }
    },
    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);
      }
      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.commit("setRouterReport", "综述链接");
      //去往文章详情页面
      uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
    },
    // 获取banner 列表
    async getBannerList() {
      const res = await Reports.collectionBannerList();
      if (res.Ret === 200) {
        this.bannerDataList = res.Data.ListA || [];
        this.bulletinData = res.Data.ListB || {};
      }
    },
    // bannaer 点击事件
    bannerSwiperHandler(item) {
      uni.navigateTo({
        url: item.Path,
      });
    },
    // 精选看板的点击事件
    lookBulletinhandler() {
      uni.navigateTo({
        url: "/reportPages/selectedBulletin/selectedBulletin",
      });
    },
  },
  /* 触底 */
  onReachBottom: Throttle(function () {
    if (this.strategyIndex == 4 && this.tabAct_idTwo != 99999) {
      this.isNum++;
      return;
    }
    if (this.status === "nomore") return;
    this.status = "loading";
    this.page_no++;
    this.tabAct_idTwo != 99999 ? this.getIndustryList() : this.getTimeLineList();
  }),
  /* 下拉刷新 */
  onPullDownRefresh: Throttle(function () {
    if (this.strategyIndex == 4) {
      this.tabAct_idTwo != 99999 ? (this.pageNumFather = 1) : this.getTimeLineList();
    } else {
      this.industryList = [];
      this.pageNumFather = null;
      this.page_no = 1;
      this.refresh = true;
      this.getIndustryList();
      this.getTradeList();
    }
    wx.stopPullDownRefresh();
  }),
  onShow() {
    this.getRecordTracking("深度研究");
    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 + "&strategyIndex=" + this.strategyIndex,
      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 {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    .content {
      position: relative;
      padding-left: 30rpx;
      .hot-top {
        display: flex;
        align-items: center;
        width: 140rpx;
        height: 100%;
        color: $uni-color-new;
        font-size: 30rpx;
        flex-shrink: 0;
        .hot-img {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
  .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: 20rpx 30rpx 0;
    overflow-x: auto;
    height: 164rpx;
    background-color: #fff;
    justify-content: space-between;
    border-radius: 4rpx;
    &::after {
      content: "";
      width: 0rpx;
      height: 46rpx;
    }
  }
  .label-content .item,
  .label-content-column .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12rpx;
    margin-bottom: 20rpx;
    width: 180rpx;
    height: 52rpx;
    background: #e5efff;
    border-radius: 150rpx;
    font-size: 24rpx;
    color: $uni-color-new;
  }
  .label-content .item,
  .label-content-column .item-size {
    font-size: 24rpx;
  }
  .banne-content {
    // height: 110rpx;
    width: 100%;
    padding: 20rpx 30rpx 0;
    overflow: hidden;
    margin: 0 auto 20rpx;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    swiper {
      // width: 447rpx;
      flex: 1;
      height: 110rpx;
      border-radius: 16rpx;
      overflow: hidden;
    }
    image {
      width: 100%;
      height: 100%;
    }
    .bulletin {
      position: relative;
      width: 214rpx;
      height: 110rpx;
      border-radius: 16rpx;
      overflow: hidden;
      .limit-img {
        position: absolute;
        top: 0;
        right: 0;
        width: 50rpx;
        height: 26rpx;
        z-index: 1;
      }
    }
  }
  .tabs-box {
    .item {
      width: 108rpx;
    }
  }
}
.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: #376cbb;
      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: #376cbb;
    color: #fff;
    border-radius: 47rpx;
  }
}
</style>