index.vue 22 KB

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