index.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646
  1. <template>
  2. <page-meta :page-style="isMorningShow ? 'overflow: hidden;' : ''">
  3. <view class="container New-container">
  4. <view :class="['content-search', bannerClass && 'banne-bg', bannerPosition && 'banner-Position']">
  5. <view class="top-content-box">
  6. <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="58">
  7. <template slot="content-left">
  8. <view class="box-img" @click="goMyInfo">
  9. <view class="content-img">
  10. <image v-if="info.Headimgurl" :src="info.Headimgurl" alt=""></image>
  11. <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/logo.png" class="avatar"></image>
  12. </view>
  13. </view>
  14. </template>
  15. </search-bar>
  16. </view>
  17. </view>
  18. <view class="banne-content" v-if="bannerDataList.length > 0">
  19. <swiper autoplay :interval="4000" circular indicator-dots>
  20. <view v-for="item in bannerDataList" :key="item.BannerId" @click="bannerSwiperHandler(item)">
  21. <swiper-item>
  22. <image :src="item.IndexImg"></image>
  23. <view class="banner-title">
  24. <text class="text_twoLine" :style="{ 'font-size': item.Subtitle.length > 24 ? '45rpx' : '50rpx' }">
  25. {{ item.Title }}
  26. </text>
  27. <text class="time text_twoLine"> {{ item.Subtitle }}</text>
  28. </view>
  29. </swiper-item>
  30. </view>
  31. </swiper>
  32. </view>
  33. <view class="lable-select-box" v-if="industryTablList.length > 0">
  34. <view class="global_two_tabs industry-box-tabs">
  35. <view
  36. :class="['item', item.ChartPermissionId == industrytabActId && 'tabs-active']"
  37. v-for="(item, index) in industryTablList"
  38. :key="item.ChartPermissionId"
  39. @click="toggleIndustryTab(item, index)"
  40. >
  41. {{ item.PermissionName }}
  42. </view>
  43. </view>
  44. <view
  45. v-if="isTopHeight"
  46. class="lable-select-content"
  47. :style="[{ top: isTopHeight }, { 'background-color': isScrollNumber >= 175 ? '#fff' : '#f5f6fa' }, { 'box-shadow': isScrollNumber >= 175 ? '0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16)' : '' }]"
  48. >
  49. <view class="lable-row" v-for="(item, index) in lableIsRows" :key="index">
  50. <view :class="['lable-item', lable.isAct && 'item-active']" v-for="lable in item" :key="lable.TagId" @click="lableKeysHandler(lable)">
  51. {{ lable.TagName }}
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <block v-if="newDataList && newDataList.length">
  57. <view class="content-ul">
  58. <view class="item-ul">
  59. <block v-for="(item, index) in newDataList" :key="index">
  60. <view v-if="index % 2 == 0 && item.IsShowData">
  61. <block v-if="item.Source === 'article' || item.Source === 'yanxuanspecial'"> <ReportItem :list="item.Article" /></block>
  62. <block v-if="item.Source === 'newchart'">
  63. <ChartItem :list="item.Newchart" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
  64. </block>
  65. <block v-if="item.Source === 'roadshow' || item.Source === 'activityvideo' || item.Source === 'activityvoice' || item.Source === 'askserievideo'">
  66. <RoadshowItem :list="item.Roadshow" @isCollectionHandeler="isCollectionHandeler" />
  67. </block>
  68. <block v-if="item.Source === 'activity' || item.Source === 'activityspecial'">
  69. <ActivityItem :list="item.Activity" />
  70. </block>
  71. <block v-if="['researchsummary', 'minutessummary', 'meetingreviewchapt', 'productinterior', 'reportselection'].includes(item.Source)">
  72. <item-content :list="dataListItem(item)" @showMorningDialog="showMorningDialog" />
  73. </block>
  74. </view>
  75. </block>
  76. </view>
  77. <view class="item-ul">
  78. <block v-for="(item, index) in newDataList" :key="index">
  79. <view v-if="index % 2 !== 0 && item.IsShowData">
  80. <block v-if="item.Source === 'article' || item.Source === 'yanxuanspecial'"> <ReportItem :list="item.Article" /></block>
  81. <block v-if="item.Source === 'newchart'">
  82. <ChartItem :list="item.Newchart" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
  83. </block>
  84. <block v-if="item.Source === 'roadshow' || item.Source === 'activityvideo' || item.Source === 'activityvoice' || item.Source === 'askserievideo'">
  85. <RoadshowItem :list="item.Roadshow" @isCollectionHandeler="isCollectionHandeler" />
  86. </block>
  87. <block v-if="item.Source === 'activity' || item.Source === 'activityspecial'">
  88. <ActivityItem :list="item.Activity" />
  89. </block>
  90. <block v-if="['researchsummary', 'minutessummary', 'meetingreviewchapt', 'productinterior', 'reportselection'].includes(item.Source)">
  91. <item-content :list="dataListItem(item)" @showMorningDialog="showMorningDialog" />
  92. </block>
  93. </view>
  94. </block>
  95. </view>
  96. </view>
  97. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
  98. </block>
  99. <view class="nodata" v-else>
  100. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
  101. <text style="">暂无数据</text>
  102. </view>
  103. <!-- <view v-if="newDataList.length === 4" class="bind-btn">
  104. <view @click="goLogin"> 为了给您提供更好的使用体验,<br />请 <text class="login-text">登录</text>后再查看此页面内容</view>
  105. </view> -->
  106. <morning-dlg v-if="isMorningShow" :isMorningShow.sync="isMorningShow" :morningItem.sync="morningItem" />
  107. </view>
  108. <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" ref="suspenButton">
  109. <template slot="center">
  110. <image mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/most_confidential.png "> </image>
  111. </template>
  112. <template slot="top">
  113. <image @click.stop="goSecretDetail(1)" mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/company_icon.png"> </image>
  114. </template>
  115. <template slot="left">
  116. <image @click.stop="goSecretDetail(3)" mode="widthFix" style="height: 120rpx; width: 120rpx" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/week_summary.png"> </image>
  117. </template>
  118. </suspenButton>
  119. <Loading />
  120. <videoModule :showVideoPop.sync="showVideoPopUp" :videoPopList="videoPopListUp" />
  121. <view v-if="showAudioBox">
  122. <audioModule :showAudioPop.sync="showAudioPop" />
  123. </view>
  124. </page-meta>
  125. </template>
  126. <script>
  127. import { Home, Mine, Reports } from "@/config/api";
  128. import ChartItem from "@/components/ItemComponent/chartItem.vue";
  129. import ReportItem from "@/components/ItemComponent/reportItem.vue";
  130. import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
  131. import ActivityItem from "@/components/ItemComponent/activityItem.vue";
  132. import SearchBar from "@/components/search-bar/searchBar.vue";
  133. import MorningDlg from "./components/morningDlg.vue";
  134. import ItemContent from "./components/ItemContent.vue";
  135. import videoModule from "@/components/videoModule/index";
  136. import suspenButton from "@/components/suspen_button.vue";
  137. import audioModule from "@/components/audioModule/index";
  138. export default {
  139. data() {
  140. return {
  141. newDataList: [],
  142. page_no: 1,
  143. pageSize: 10,
  144. status: "loadmore",
  145. refresh: false, //正在下拉
  146. loadText: {
  147. loadmore: "上拉加载更多",
  148. loading: "加载中",
  149. nomore: "已经到底了",
  150. },
  151. info: {},
  152. isMorningShow: false, // 晨会的弹框
  153. morningItem: {}, // 晨会的弹框
  154. bannerDataList: [], // banner数据
  155. showVideoPopUp: false, //
  156. videoPopListUp: {},
  157. isScrollNumber: 0,
  158. dataListLable: [], // 标签的数据
  159. actIdLable: "", // 标签选择后的ID
  160. isTopHeight: "",
  161. lableArrList: [],
  162. showAudioPop: false,
  163. industryTablList: [],
  164. industrytabActId: 0,
  165. };
  166. },
  167. computed: {
  168. bannerClass() {
  169. //判断banner的样式
  170. return this.bannerDataList.length > 0 && this.isScrollNumber < 235;
  171. },
  172. bannerPosition() {
  173. return this.bannerDataList.length > 0;
  174. },
  175. lableIsRows() {
  176. //处理标签的样式
  177. const numTags = this.dataListLable.length;
  178. const rows = [];
  179. if (numTags <= 4) {
  180. rows.push(this.dataListLable);
  181. } else if (numTags > 4 && numTags <= 8) {
  182. const firstRow = this.dataListLable.slice(0, 4);
  183. const secondRow = this.dataListLable.slice(4);
  184. rows.push(firstRow, secondRow);
  185. } else if (numTags >= 9) {
  186. const firstRow = this.dataListLable.filter((_, index) => index % 2 === 0);
  187. const secondRow = this.dataListLable.filter((_, index) => index % 2 !== 0);
  188. rows.push(firstRow, secondRow);
  189. }
  190. return rows;
  191. },
  192. showAudioBox() {
  193. return this.$store.state.audioBg.parseIntShow;
  194. },
  195. },
  196. components: {
  197. ChartItem,
  198. ReportItem,
  199. RoadshowItem,
  200. ActivityItem,
  201. SearchBar,
  202. MorningDlg,
  203. ItemContent,
  204. videoModule,
  205. suspenButton,
  206. audioModule,
  207. },
  208. methods: {
  209. // 获取最先数据
  210. async getNewList() {
  211. const res = await Home.getNewList({
  212. PageSize: this.pageSize,
  213. CurrentIndex: this.page_no,
  214. TagIds: this.actIdLable,
  215. ChartPermissionId: this.industrytabActId,
  216. });
  217. if (res.Ret === 200) {
  218. this.status = !res.Data.Paging.IsEnd ? "loadmore" : "nomore";
  219. let listArr = [];
  220. res.Data.List &&
  221. res.Data.List.forEach((item) => {
  222. let obj = {
  223. Source: item.Source,
  224. Article: item.Article || item.YanxuanSpecial,
  225. Newchart: item.Newchart,
  226. Activity: item.Activity || item.Activityspecial,
  227. Roadshow: item.Roadshow || item.Activityvideo || item.Activityvoice || item.AskserieVideo,
  228. ThreeSummary: item.Researchsummary || item.Minutessummary || item.Meetingreviewchapt || item.ProductInterior || item.ReportSelection,
  229. };
  230. listArr.push({ ...obj, IsShowData: obj.Article || obj.Newchart || obj.Roadshow || obj.Activity || obj.ThreeSummary || item.YanxuanSpecial });
  231. });
  232. this.newDataList = this.page_no === 1 ? listArr : [...this.newDataList, ...listArr];
  233. if (this.refresh) {
  234. uni.stopPullDownRefresh();
  235. this.refresh = false;
  236. }
  237. }
  238. },
  239. // 微路演收藏
  240. async isCollectionHandeler(item) {
  241. await this.$store.dispatch("showLoginModal");
  242. const res = await Home.microRoadshowCollect({
  243. SourceId: item.SourceId,
  244. SourceType: item.Type,
  245. PageRouter: this.$store.state.pageRouterReport,
  246. });
  247. if (res.Ret === 200) {
  248. let index = this.newDataList.findIndex((key) => key.Roadshow && key.Roadshow.SourceId == item.SourceId && key.Roadshow.Type == item.Type);
  249. res.Data.Status == 1 ? (this.newDataList[index].Roadshow.IsCollect = true) : (this.newDataList[index].Roadshow.IsCollect = false);
  250. uni.showToast({
  251. title: res.Msg,
  252. duration: 2000,
  253. });
  254. }
  255. },
  256. // 跳转到我的页面
  257. goMyInfo() {
  258. uni.navigateTo({
  259. url: "/pageMy/myPage/myPage",
  260. });
  261. },
  262. // 跳转绑定页面
  263. goLogin() {
  264. uni.showModal({
  265. title: "即将前往登录页面,请确认是否继续",
  266. content: "为了给您提供更好的使用体验,请登录后再进行查看或操作",
  267. confirmColor: "#376cbb",
  268. cancelColor: "#606266",
  269. success: function (res) {
  270. if (res.confirm) {
  271. //已授权未绑定
  272. uni.navigateTo({
  273. url: "/pageMy/login/login",
  274. });
  275. }
  276. },
  277. });
  278. },
  279. /* 搜索 */
  280. goSearch() {
  281. uni.navigateTo({ url: "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive + "&source=首页页面" });
  282. },
  283. async getUserInfo() {
  284. const res = await Mine.getInfo();
  285. if (res.Ret === 200) {
  286. this.info = res.Data;
  287. }
  288. },
  289. // 晨会弹框显示
  290. async showMorningDialog(item) {
  291. if (item.Source == "meetingreviewchapt") {
  292. const res = await Reports.morning_meeting_history({ Id: item.Id, SourcePage: "首页" });
  293. this.isMorningShow = true;
  294. this.morningItem = item;
  295. }
  296. },
  297. dataListItem(item) {
  298. let obj = item.ThreeSummary ? { ...item.ThreeSummary, Source: item.Source } : {};
  299. return obj;
  300. },
  301. /* 绝密标签点击后的跳转 */
  302. goSecretDetail(type) {
  303. if (type == 1) {
  304. uni.navigateTo({
  305. url: "/reportPages/keyCompany/keyCompany",
  306. });
  307. } else {
  308. uni.navigateTo({
  309. url: "/reportPages/secretDetails/secretDetails",
  310. });
  311. }
  312. this.$refs.suspenButton.onOpen();
  313. },
  314. // 获取banner 列表
  315. async getBannerList() {
  316. const res = await Home.bannerList();
  317. if (res.Ret === 200) {
  318. this.bannerDataList = res.Data.List || [];
  319. }
  320. },
  321. // bannaer 点击事件
  322. async bannerSwiperHandler(item) {
  323. let { Type, SourceId, Path } = item.BannerUrlResp;
  324. if (Type == 1) return;
  325. await Home.bannerHistory({
  326. BannerId: item.BannerId,
  327. });
  328. if (Type == 5) {
  329. let obj = {
  330. BackgroundImg: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/my_log.png",
  331. Id: SourceId,
  332. PlaySeconds: "15",
  333. ResourceUrl: "https://hzstatic.hzinsights.com/static/yb/video/8617330c2a76e0c35999f6466b4470c4.mp4",
  334. Title: "三分钟了解弘则研究体系和方法论",
  335. Type: "三分钟了解弘则研究体系和方法论",
  336. };
  337. this.videoPopListUp = obj;
  338. this.showVideoPopUp = true;
  339. await Mine.addHistory();
  340. } else {
  341. Path &&
  342. uni.navigateTo({
  343. url: Path + SourceId,
  344. });
  345. }
  346. },
  347. async lableKeysHandler(item) {
  348. const checkList = item.CheckList;
  349. if (item.isAct) {
  350. item.isAct = false;
  351. this.lableArrList = this.lableArrList.filter((key) => checkList.includes(key));
  352. this.getLableDataList();
  353. return;
  354. }
  355. let isFlag = false; //是否有交集
  356. for (let e of checkList) {
  357. if (this.lableArrList.includes(e)) {
  358. isFlag = true;
  359. break;
  360. }
  361. }
  362. if (!isFlag) {
  363. this.lableArrList = [...this.lableArrList, ...checkList];
  364. item.isAct = true;
  365. } else {
  366. //有交集
  367. // 找到有交集的那个 设置为false 然后将点击的这个设置为true
  368. this.lableIsRows.forEach((e1) => {
  369. e1.forEach((e2) => {
  370. let flag = false;
  371. for (let i of e2.CheckList) {
  372. if (this.lableArrList.includes(i)) {
  373. flag = true;
  374. break;
  375. }
  376. }
  377. if (flag) {
  378. e2.isAct = false;
  379. }
  380. });
  381. });
  382. item.isAct = true;
  383. }
  384. this.getLableDataList();
  385. if (!item.isAct) return;
  386. const res = await Home.tagAddHistory({
  387. TagId: item.TagId,
  388. });
  389. },
  390. getLableDataList() {
  391. let actId = [];
  392. this.lableIsRows.forEach((item) => {
  393. item.forEach((_) => {
  394. _.isAct && actId.push(_.TagId);
  395. });
  396. });
  397. this.page_no = 1;
  398. this.actIdLable = actId.join(",");
  399. this.getNewList();
  400. },
  401. // 或者标签内容
  402. async homeTagListCustom() {
  403. const res = await Home.homeTagListCustom();
  404. if (res.Ret === 200) {
  405. this.dataListLable = res.Data.List || [];
  406. this.industryTablList = res.Data.ListPermission || [];
  407. }
  408. },
  409. // 行业选择的筛选
  410. toggleIndustryTab(item) {
  411. if (this.industrytabActId === item.ChartPermissionId) {
  412. this.industrytabActId = 0;
  413. } else {
  414. this.industrytabActId = item.ChartPermissionId;
  415. }
  416. this.page_no = 1;
  417. this.getNewList();
  418. },
  419. },
  420. mounted() {
  421. uni.$on("updateNewList", (data) => {
  422. this.page_no = 1;
  423. this.getNewList();
  424. });
  425. },
  426. onLoad() {
  427. this.getBannerList();
  428. this.getNewList();
  429. this.homeTagListCustom();
  430. let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  431. this.isTopHeight = menuButtonInfo.height + menuButtonInfo.top + 7 + "px";
  432. },
  433. onShow() {
  434. this.getUserInfo();
  435. this.getRecordTracking("首页");
  436. this.$store.commit("setRouterActivity", "首页");
  437. this.$store.commit("setRouterReport", "首页");
  438. },
  439. // 加载数据
  440. onReachBottom() {
  441. if (this.status === "nomore" || this.newDataList.length < 8) return;
  442. this.status = "loading";
  443. this.page_no++;
  444. this.getNewList();
  445. },
  446. // 下拉刷新
  447. onPullDownRefresh() {
  448. this.page_no = 1;
  449. this.refresh = true;
  450. this.getNewList();
  451. },
  452. onPageScroll(val) {
  453. this.isScrollNumber = val.scrollTop;
  454. },
  455. /** 用户点击分享*/
  456. onShareAppMessage: function ({ from, target }) {
  457. if (from === "button") {
  458. let item = target.dataset.item;
  459. let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
  460. // type=2 -- 活动视频 type=3 -- 产业视频
  461. let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
  462. let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
  463. let title_share = item.AudioTitle || item.Title;
  464. this.getRecordTracking("首页转发", { ActivityId: item.ActivityId, Id: item.Id, Type: item.Type });
  465. return {
  466. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : title_share,
  467. path: "/pages/material/material?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
  468. imageUrl: item.AudioShareImg || item.ShareImg,
  469. };
  470. } else {
  471. return {
  472. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "弘则研究—聚焦·前瞻·客观·深度",
  473. path: "/pages/index/index",
  474. success: (res) => {},
  475. fail: (err) => {},
  476. };
  477. }
  478. },
  479. };
  480. </script>
  481. <style lang="scss" scoped>
  482. .New-container {
  483. background-color: $uni-bg-color;
  484. .content-search {
  485. position: sticky;
  486. top: 0;
  487. left: 0;
  488. width: 100%;
  489. z-index: 9;
  490. .top-content-box {
  491. position: sticky;
  492. top: 0;
  493. left: 0;
  494. width: 100%;
  495. z-index: 9;
  496. }
  497. }
  498. .banner-Position {
  499. position: fixed !important;
  500. }
  501. .banne-bg {
  502. /deep/ .nav-bar-wrap {
  503. background-color: transparent;
  504. }
  505. }
  506. .banne-content {
  507. height: 402rpx;
  508. width: 100%;
  509. overflow: hidden;
  510. swiper {
  511. height: 402rpx;
  512. }
  513. image {
  514. width: 100%;
  515. height: 100%;
  516. }
  517. .banner-title {
  518. position: absolute;
  519. bottom: 35rpx;
  520. left: 20rpx;
  521. color: #fff;
  522. font-weight: 500;
  523. line-height: 65rpx;
  524. min-height: 160rpx;
  525. max-height: 225rpx;
  526. overflow: hidden;
  527. .time {
  528. font-size: 28rpx;
  529. line-height: 39rpx;
  530. }
  531. }
  532. .top-content-box {
  533. position: absolute;
  534. top: 0;
  535. left: 0;
  536. width: 100%;
  537. z-index: 9;
  538. }
  539. }
  540. /deep/ .nav-bar-wrap {
  541. padding-left: 35rpx;
  542. .box-img {
  543. position: relative;
  544. height: 64rpx;
  545. width: 64rpx;
  546. display: flex;
  547. align-items: center;
  548. justify-content: center;
  549. margin-right: 20rpx;
  550. border-radius: 50%;
  551. image {
  552. width: 64rpx;
  553. height: 64rpx;
  554. }
  555. .content-img {
  556. position: absolute;
  557. top: 0;
  558. left: 0;
  559. width: 64rpx;
  560. height: 64rpx;
  561. border-radius: 50%;
  562. overflow: hidden;
  563. z-index: 9;
  564. }
  565. }
  566. }
  567. .content-ul {
  568. padding: 20rpx 10rpx;
  569. display: flex;
  570. justify-content: space-between;
  571. .item-ul {
  572. width: 49%;
  573. &:first-child {
  574. margin-right: 10rpx;
  575. }
  576. }
  577. }
  578. .bind-btn {
  579. padding-top: 110rpx;
  580. text-align: center;
  581. font-size: 24rpx;
  582. color: #333;
  583. line-height: 39rpx;
  584. padding-bottom: 100rpx;
  585. .login-text {
  586. display: inline-block;
  587. color: #376cbb;
  588. }
  589. }
  590. .lable-select-box {
  591. position: sticky;
  592. left: 0;
  593. top: 88px;
  594. z-index: 9;
  595. width: 100%;
  596. }
  597. .lable-select-content {
  598. overflow: hidden;
  599. overflow-x: auto;
  600. width: 100%;
  601. background-color: #fff;
  602. padding: 10rpx 0 20rpx 20rpx;
  603. .lable-row {
  604. display: flex;
  605. font-size: 24rpx;
  606. }
  607. .lable-item {
  608. flex-shrink: 0;
  609. padding: 8rpx 40rpx;
  610. background: #ffffff;
  611. border: 1rpx solid #dcdfe6;
  612. border-radius: 39rpx;
  613. margin-right: 20rpx;
  614. white-space: nowrap;
  615. margin-top: 20rpx;
  616. color: #999999;
  617. }
  618. .item-active {
  619. border: none;
  620. font-weight: 500;
  621. background: #e5efff;
  622. color: $uni-color-new;
  623. }
  624. }
  625. .industry-box-tabs {
  626. background-color: #fff;
  627. align-items: center;
  628. justify-content: space-between;
  629. padding: 0 10rpx;
  630. .item {
  631. background-color: #f8f8fa;
  632. border-radius: 200rpx;
  633. height: 64rpx;
  634. }
  635. }
  636. }
  637. </style>