purchaser.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704
  1. <template>
  2. <view class="container resear-container">
  3. <view class="top-content-box">
  4. <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="70" />
  5. <view class="content-tabs">
  6. <view v-for="item in TabBars" :key="item.val" :class="['item', item.val == topTabsActive && 'tabs-active']" @click="topTabsClickHandler(item)">
  7. {{ item.titel }}
  8. <view class="active" v-if="item.val == topTabsActive"></view>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="notice-content" v-if="wholeShowListData.YanXuan_Explain">
  13. <view class="notice">
  14. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/placard_icon.png"></image>
  15. <view class="notice-bar">
  16. <van-notice-bar color="#3385FF" background="#DFECFF" text="买方研选内容试行阶段,限时免费。也欢迎您向我们提宝贵建议。" />
  17. </view>
  18. </view>
  19. </view>
  20. <view class="announcement">
  21. <view class="tab-cont" v-if="topTabsActive == 2">
  22. <scroll-view scroll-x="true" @scroll="scrollMove" :scroll-left="scrollLeft" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
  23. <block v-for="(item, index) in researchTabBars" :key="index">
  24. <view class="scroll-tab-item" :class="{ active: tagActive == item.name }" @click.stop="typeChange(item)">
  25. {{ item.titel }}
  26. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tagActive == item.name"></image>
  27. </view>
  28. </block>
  29. </scroll-view>
  30. </view>
  31. <blok v-else>
  32. <van-checkbox-group class="checkbox-ui" :value="newCheckboxValue" @change="checkboxChange">
  33. <van-checkbox style="margin-right: 30rpx; flex-shrink: 0" shape="square" icon-size="14" :name="item.ArticleTypeId" v-for="item in checkboxGroup" :key="item.ArticleTypeId">{{
  34. item.ArticleTypeName
  35. }}</van-checkbox>
  36. </van-checkbox-group>
  37. </blok>
  38. <view class="content-ul" v-if="tagActive == '用户' || topTabsActive == 1">
  39. <blok v-if="haveData">
  40. <view class="user-li" v-for="(item, index) in collectionList" :key="item.ArticleId">
  41. <view class="li-item">
  42. <text class="li-serial" :style="{ background: serialBackground(index) }" v-if="topTabsActive == 2">
  43. {{ index + 1 }}
  44. </text>
  45. <text class="li-type" :style="{ background: item.ButtonStyle }" v-else>
  46. {{ item.ArticleTypeName }}
  47. </text>
  48. <view>
  49. <text class="title" @click="goDetail(item)" :style="{ display: 'inline', marginLeft: item.Title.substr(0, 1) != '【' ? '14rpx' : 0 }">{{ item.Title }}</text>
  50. <text v-if="topTabsActive == 2" class="li-industry" @click="themeDetails(item, '月度收藏榜')"> # {{ item.IndustryName }} </text>
  51. <text v-else class="li-industry" @click="themeDetails(key, '月度收藏榜')" v-for="key in item.List" :key="key.IndustrialManagementId"> # {{ key.IndustryName }} </text>
  52. </view>
  53. </view>
  54. <view class="li-item li-bottom" style="color: #999999">
  55. <viwe class="time-user">
  56. <text>
  57. {{ item.PublishDate }}
  58. </text>
  59. <view class="li-user text_oneLine" @click="authorDetails(item)">
  60. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/user_report.png"></image>
  61. {{ item.NickName }}
  62. </view>
  63. </viwe>
  64. <view class="li-item user-img">
  65. <view class="img-box">
  66. <image class="user-pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
  67. <text>
  68. {{ item.Pv }}
  69. </text>
  70. </view>
  71. <view class="img-box" @click="collectClick(item)">
  72. <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image>
  73. <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png"></image>
  74. <text class=""> {{ item.CollectNum }}人收藏 </text>
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. </blok>
  80. <!-- <view class="content-bottom" v-if="topTabsActive == 2">最新榜单您已掌握,明天再刷刷看~</view> -->
  81. <view class="nodata" v-else>
  82. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
  83. <text>暂无活动</text>
  84. </view>
  85. </view>
  86. <view class="content-ul" v-if="topTabsActive == 2 && hotList.length && tagActive == '主题'">
  87. <view class="hot-li" v-for="(item, index) in hotList" :key="item.IndustrialManagementId">
  88. <view class="li-item hot-item">
  89. <view style="display: flex" class="text_oneLine hot-new" @click="themeDetails(item, '主题热度榜')">
  90. <text class="li-serial serial-number" :style="{ background: serialBackground(index) }">
  91. {{ index + 1 }}
  92. </text>
  93. <text class="text_oneLine title" style="display: inline"> # {{ item.IndustryName }} </text>
  94. <image class="new-img" v-if="item.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png"></image>
  95. </view>
  96. <text :class="item.IsFollw ? 'cancel-attention' : 'attention'" @click="isAttention(item, '主题')">{{ item.IsFollw ? "取消关注" : "+ 关注" }}</text>
  97. </view>
  98. <view class="li-item read-more" @click="themeDetails(item, '主题热度榜')">
  99. <text class="text-box text_oneLine" v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId">
  100. {{ val.SubjectName }}
  101. </text>
  102. </view>
  103. </view>
  104. <view class="content-button" @click="goThemeAuthor('主题')">查看全部主题>></view>
  105. </view>
  106. <view class="content-ul" v-if="topTabsActive == 2 && kolList.length && tagActive == '专家'">
  107. <view class="kol-li" v-for="(item, index) in kolList" :key="item.DepartmentId">
  108. <text class="li-serial serial-number" :style="{ background: serialBackground(index) }">
  109. {{ index + 1 }}
  110. </text>
  111. <image @click="authorDetails(item)" :src="item.ImgUrl" v-if="item.ImgUrl"></image>
  112. <view class="li-item kol-item">
  113. <view class="item-top">
  114. <text @click="authorDetails(item)">
  115. {{ item.NickName }}
  116. </text>
  117. <text :class="item.IsFollw ? 'cancel-attention' : 'attention'" @click="isAttention(item, '专家')">{{ item.IsFollw ? "取消关注" : "+ 关注" }}</text>
  118. </view>
  119. <text @click="themeDetails(val, 'KOL榜')" class="kol-text text_oneLine" v-for="val in item.List" :key="val.IndustrialManagementId"> # {{ val.IndustryName }} </text>
  120. </view>
  121. </view>
  122. <view class="content-button" @click="goThemeAuthor('作者')">查看全部作者>></view>
  123. </view>
  124. <u-loadmore :status="status" :load-text="loadText" v-if="page_no > 1" />
  125. </view>
  126. <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  127. <u-modal
  128. v-model="goFollowShow"
  129. :content-style="{ fontSize: '32rpx' }"
  130. @confirm="goFollowShowBtn"
  131. :show-cancel-button="isCancelBtn"
  132. :confirm-text="confirmText"
  133. @cancel="isCancelBtn = false"
  134. :show-title="false"
  135. :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
  136. :confirm-style="{ fontWeight: '700' }"
  137. >
  138. <view class="slot-content">
  139. <rich-text :nodes="accounts"></rich-text>
  140. </view>
  141. </u-modal>
  142. </view>
  143. </template>
  144. <script>
  145. import { Reports, Research, Report } from "@/config/api.js";
  146. import freeCharge from "@/components/freeCharge";
  147. import SearchBar from "@/components/search-bar/searchBar.vue";
  148. import { ResearchTabBars, TabBars, CheckboxGroup } from "./components/Tabs";
  149. export default {
  150. components: { freeCharge, SearchBar },
  151. data() {
  152. return {
  153. // themeNewList: [],
  154. topTabsActive: 1,
  155. tagActive: "用户",
  156. collectionList: [], //用户收藏
  157. hotList: [],
  158. kolList: [],
  159. confirmText: "知道了",
  160. accounts: "",
  161. isCancelBtn: false,
  162. goFollowShow: false,
  163. newCheckboxValue: [],
  164. checkboxGroup: [],
  165. status: "loadmore",
  166. loadText: {
  167. loadmore: "上拉加载更多",
  168. loading: "加载中",
  169. nomore: "已经到底了",
  170. },
  171. page_no: 1,
  172. pageSize: 10,
  173. haveData: true,
  174. };
  175. },
  176. mounted() {
  177. // 处理数据 列表同步详情
  178. uni.$on("updateFllowTheme", (data) => {
  179. this.hotList.forEach((item) => {
  180. if (item.IndustrialManagementId == data.id) {
  181. item.IsFollw = data.isFollw;
  182. }
  183. });
  184. });
  185. // 处理数据 列表同步详情
  186. uni.$on("updateFllowAuthor", (data) => {
  187. this.kolList.forEach((item) => {
  188. if (item.DepartmentId == data.id) {
  189. item.IsFollw = data.isFollw;
  190. }
  191. });
  192. });
  193. },
  194. computed: {
  195. researchTabBars() {
  196. return ResearchTabBars;
  197. },
  198. TabBars() {
  199. return TabBars;
  200. },
  201. },
  202. watch: {
  203. tagActive: {
  204. handler(val) {
  205. this.topTabsActive == 2 && val == "用户" ? this.researchCollectionList() : val == "主题" ? this.researchHotList() : this.researchKolList();
  206. },
  207. immediate: true,
  208. },
  209. topTabsActive: {
  210. handler(val) {
  211. this.collectionList = [];
  212. val == 2 ? this.researchCollectionList() : this.researchArticleNewList();
  213. },
  214. immediate: true,
  215. },
  216. },
  217. methods: {
  218. //用户收藏榜
  219. async researchCollectionList() {
  220. const res = await Research.researchCollectionList({ ChartPermissionId: 31 });
  221. if (res.Ret === 200) {
  222. this.collectionList = res.Data.List || [];
  223. }
  224. },
  225. //主题热度/近期更新更多
  226. async researchHotList() {
  227. const res = await Research.researchHotList({ ChartPermissionId: 31, ThemeType: 1 });
  228. if (res.Ret === 200) {
  229. this.hotList = res.Data.List || [];
  230. }
  231. },
  232. //KOL榜列表接口
  233. async researchKolList() {
  234. const res = await Research.researchKolList({ ChartPermissionId: 31 });
  235. if (res.Ret === 200) {
  236. this.kolList = res.Data.List || [];
  237. }
  238. },
  239. //tabs切换
  240. typeChange(item) {
  241. this.tagActive = item.name;
  242. },
  243. //关注
  244. async isAttention(item, val) {
  245. const res =
  246. val === "主题"
  247. ? await Reports.reportFllow({ IndustrialManagementId: item.IndustrialManagementId, PageRouter: this.$store.state.pageRouterReport })
  248. : await Reports.reportFllowDepartment({ DepartmentId: item.DepartmentId, PageRouter: this.$store.state.pageRouterReport });
  249. if (res.Ret === 200) {
  250. item.IsFollw = !item.IsFollw;
  251. if (res.Data.Status == 1) {
  252. this.goFollowShow = true;
  253. this.confirmText = res.Data.GoFollow ? "去关注" : "知道了";
  254. if (res.Data.GoFollow) {
  255. this.accounts = `${val == "主题" ? "产业" : "作者"}关注成功 <br> 想要及时获取该${val === "主题" ? "产业内容的更新推送" : "作者的报告更新提示"},请关注【查研观向小助手】公众号`;
  256. this.isCancelBtn = true;
  257. } else {
  258. this.accounts = `${val == "主题" ? "产业" : "作者"}` + `关注成功<br>请关注【查研观向小助手】公众号,及时获取${val === "主题" ? "产业" : "作者"}报告更新提醒`;
  259. }
  260. } else {
  261. uni.showToast({
  262. title: "已取消关注",
  263. icon: "none",
  264. duration: 2000,
  265. });
  266. }
  267. }
  268. },
  269. //去关注
  270. goFollowShowBtn() {
  271. if (this.confirmText == "去关注") {
  272. uni.navigateTo({
  273. url: "/activityPages/accountsOfficial/accountsOfficial",
  274. });
  275. }
  276. this.goFollowShow = false;
  277. },
  278. //去往更多主题
  279. // goRecent() {
  280. // uni.navigateTo({
  281. // url: "/reportPages/recentPages/recentPages?id=31",
  282. // });
  283. // },
  284. //收藏
  285. async collectClick(item) {
  286. const res = await Report.collectRpt({ ArticleId: item.ArticleId, PageRouter: "月度收藏榜" });
  287. if (res.Ret === 200) {
  288. item.IsCollect = !item.IsCollect;
  289. item.IsCollect
  290. ? (item.CollectNum += 1) &&
  291. uni.showToast({
  292. title: "收藏成功",
  293. icon: "none",
  294. duration: 2000,
  295. })
  296. : (item.CollectNum -= 1);
  297. !item.IsCollect &&
  298. uni.showToast({
  299. title: "已取消收藏",
  300. icon: "none",
  301. duration: 2000,
  302. });
  303. }
  304. },
  305. //去往作者详情
  306. authorDetails(item) {
  307. uni.navigateTo({
  308. url: "/reportPages/authorPages/authorPages?id=" + item.DepartmentId,
  309. });
  310. },
  311. //去往文章详情页面
  312. goDetail(item) {
  313. this.$store.commit("setRouterReport", "月度收藏榜");
  314. this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
  315. },
  316. //去往主题详情
  317. themeDetails(item, source) {
  318. this.$store.dispatch("checkHandle", "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId + "&pageRouter=" + source);
  319. },
  320. //计算遍历的颜色
  321. serialBackground(index) {
  322. index += 1;
  323. return index == 1 ? "#D7584F" : index == 2 ? "#E98033" : index == 3 ? "#FDD367" : "#D3D3D3";
  324. },
  325. /* 搜索 */
  326. async goSearch() {
  327. await this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?id=研选" + "&source=买方研选页面");
  328. },
  329. // 头部tab的点击事件
  330. topTabsClickHandler(item) {
  331. this.topTabsActive = item.val;
  332. this.haveData = true;
  333. this.page_no = 1;
  334. },
  335. // 复选框组的选择事件
  336. checkboxChange(e) {
  337. this.newCheckboxValue = e.detail;
  338. this.page_no = 1;
  339. this.researchArticleNewList();
  340. },
  341. // 跳转主题 of 作者
  342. goThemeAuthor(type) {
  343. type === "主题" ? uni.navigateTo({ url: "/pages-purchaser/researchTheme/researchTheme" }) : uni.navigateTo({ url: "/pages-purchaser/researchAuthor/researchAuthor" });
  344. },
  345. // 获取最新下的文章类型
  346. async researchArticleTypeList() {
  347. const res = await Research.researchArticleTypeList();
  348. if (res.Ret === 200) {
  349. this.checkboxGroup = res.Data.List;
  350. }
  351. },
  352. // 获取最新的文章列表
  353. async researchArticleNewList() {
  354. const res = await Research.researchArticleNewList({
  355. PageSize: this.pageSize,
  356. CurrentIndex: this.page_no,
  357. ArticleTypeIds: this.newCheckboxValue.join(","),
  358. });
  359. if (res.Ret === 200) {
  360. this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
  361. this.collectionList = this.page_no === 1 ? res.Data.List || [] : [...this.collectionList, ...res.Data.List];
  362. if (this.page_no == 1) {
  363. this.haveData = this.collectionList.length ? true : false;
  364. }
  365. }
  366. },
  367. },
  368. onLoad() {
  369. this.researchArticleTypeList();
  370. },
  371. onShow() {
  372. this.$store.commit("setRouterReport", "买方研选");
  373. this.getRecordTracking("买方研选");
  374. },
  375. /* 下拉刷新 */
  376. // onPullDownRefresh() {
  377. // wx.stopPullDownRefresh();
  378. // },
  379. onReachBottom() {
  380. if (this.status == "nomore" || this.topTabsActive != 1) return;
  381. this.status = "loading";
  382. this.page_no++;
  383. this.researchArticleNewList();
  384. },
  385. /**
  386. * 用户点击分享
  387. */
  388. onShareAppMessage: function (res) {
  389. return {
  390. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "买方研选",
  391. path: "pages/purchaser/purchaser",
  392. success: (res) => {},
  393. fail: (err) => {},
  394. };
  395. },
  396. };
  397. </script>
  398. <style lang="scss">
  399. .resear-container {
  400. background-color: #f7f7f7;
  401. .nav-bar-wrap,
  402. .top-content-box {
  403. position: sticky;
  404. top: 0;
  405. left: 0;
  406. z-index: 999;
  407. padding-left: 30rpx;
  408. }
  409. .top-content-box {
  410. padding-left: 0;
  411. margin-bottom: 20rpx;
  412. .content-tabs {
  413. background-color: #fff;
  414. display: flex;
  415. justify-content: center;
  416. padding-bottom: 10rpx;
  417. .item {
  418. padding-top: 20rpx;
  419. font-size: 34rpx;
  420. position: relative;
  421. padding-bottom: 8rpx;
  422. margin-right: 60rpx;
  423. flex-shrink: 0;
  424. .active {
  425. position: absolute;
  426. left: 0;
  427. bottom: 0;
  428. height: 4rpx;
  429. width: 100%;
  430. border-radius: 1rpx;
  431. background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
  432. }
  433. }
  434. .tabs-active {
  435. color: #3385ff;
  436. font-weight: 500;
  437. }
  438. }
  439. }
  440. .notice-content {
  441. position: sticky;
  442. left: 0;
  443. top: 200rpx;
  444. z-index: 99;
  445. width: 100%;
  446. background-color: #fff;
  447. padding-bottom: 20rpx;
  448. }
  449. .notice {
  450. height: 56rpx;
  451. overflow: hidden;
  452. background-color: #dfecff;
  453. display: flex;
  454. align-items: center;
  455. padding-left: 30rpx;
  456. image {
  457. width: 30rpx;
  458. height: 30rpx;
  459. }
  460. .notice-bar {
  461. flex: 1;
  462. }
  463. .van-notice-bar {
  464. height: 56rpx;
  465. }
  466. }
  467. .content-ul {
  468. border-top: 1px solid #f6f6f6;
  469. .user-li,
  470. .hot-li,
  471. .kol-li {
  472. padding: 30rpx 0 20rpx;
  473. border-bottom: 1px solid #f6f6f6;
  474. }
  475. .user-img {
  476. width: 38%;
  477. justify-content: space-between;
  478. .img-box {
  479. display: flex;
  480. align-items: center;
  481. }
  482. .user-pv {
  483. width: 21rpx;
  484. height: 16rpx;
  485. }
  486. }
  487. .kol-li {
  488. display: flex;
  489. align-items: center;
  490. padding-bottom: 30rpx;
  491. image {
  492. width: 120rpx;
  493. height: 120rpx;
  494. border-radius: 8rpx;
  495. margin: 0 20rpx 0 15rpx;
  496. overflow: hidden;
  497. flex-shrink: 0;
  498. }
  499. }
  500. .kol-item {
  501. display: flex;
  502. flex-wrap: wrap;
  503. width: 480rpx;
  504. height: 120rpx;
  505. align-items: baseline;
  506. margin-bottom: 20rpx;
  507. .item-top {
  508. width: 100%;
  509. display: flex;
  510. align-items: center;
  511. justify-content: space-between;
  512. font-size: 29rpx;
  513. font-weight: 700;
  514. }
  515. .kol-text {
  516. width: 50%;
  517. margin-top: 10rpx;
  518. flex-shrink: 0;
  519. }
  520. }
  521. .li-serial {
  522. width: 26rpx;
  523. height: 26rpx;
  524. line-height: 26rpx;
  525. color: #fff;
  526. font-size: 20rpx;
  527. text-align: center;
  528. border-radius: 4rpx 4rpx 4rpx 4rpx;
  529. margin: 7rpx 10rpx 0 20rpx;
  530. flex-shrink: 0;
  531. }
  532. .li-type {
  533. padding: 0 15rpx;
  534. height: 29rpx;
  535. margin-top: 6rpx;
  536. display: flex;
  537. align-items: center;
  538. flex-shrink: 0;
  539. border-radius: 4rpx;
  540. color: #fff;
  541. font-size: 24rpx;
  542. font-weight: 500;
  543. }
  544. .serial-number {
  545. margin-top: 0 !important;
  546. }
  547. .li-item {
  548. display: flex;
  549. .title {
  550. font-size: 28rpx;
  551. line-height: 39rpx;
  552. font-weight: 500;
  553. color: #333;
  554. }
  555. .li-industry {
  556. color: #3385ff;
  557. margin-left: 20rpx;
  558. display: inline-block;
  559. font-weight: 400;
  560. }
  561. .time-user {
  562. display: flex;
  563. align-items: center;
  564. font-size: 24rpx;
  565. }
  566. .li-user {
  567. display: flex;
  568. align-items: center;
  569. flex-shrink: 0;
  570. width: 170rpx;
  571. margin-left: 75rpx;
  572. }
  573. .li-title {
  574. display: flex;
  575. }
  576. }
  577. .li-bottom {
  578. display: flex;
  579. justify-content: space-between;
  580. align-items: center;
  581. margin-top: 30rpx;
  582. width: 100%;
  583. image {
  584. width: 23rpx;
  585. height: 26rpx;
  586. margin-right: 10rpx;
  587. }
  588. }
  589. .read-more {
  590. margin-left: 30rpx;
  591. margin-top: 20rpx;
  592. display: flex;
  593. flex-wrap: wrap;
  594. .text-box {
  595. margin-bottom: 27rpx;
  596. margin-right: 40rpx;
  597. padding: 0;
  598. font-size: 24rpx;
  599. color: #408fff;
  600. width: 170rpx;
  601. height: 46rpx;
  602. line-height: 46rpx;
  603. text-align: center !important;
  604. background: url(~@/static/img/report_bg.png) no-repeat;
  605. background-size: 100% 100%;
  606. text-indent: 0em;
  607. }
  608. }
  609. .attention {
  610. flex-shrink: 0;
  611. padding: 5rpx 28rpx;
  612. border-radius: 37rpx 37rpx 37rpx 37rpx;
  613. color: #fff;
  614. background: #3385ff;
  615. font-weight: 400;
  616. font-size: 24rpx;
  617. }
  618. .hot-item {
  619. justify-content: space-between;
  620. align-items: center;
  621. .hot-new {
  622. align-items: center;
  623. flex: 1;
  624. padding-right: 20rpx;
  625. }
  626. .new-img {
  627. width: 60rpx;
  628. height: 30rpx;
  629. margin-left: 15rpx;
  630. flex-shrink: 0;
  631. }
  632. }
  633. }
  634. .announcement {
  635. background: #fff;
  636. padding: 0 30rpx;
  637. .tab-cont {
  638. height: 115rpx;
  639. background-color: #fff;
  640. font-size: 32rpx;
  641. border-bottom: 1rpx solid #ececec;
  642. .scroll-tab {
  643. position: relative;
  644. width: 100%;
  645. white-space: nowrap;
  646. display: flex;
  647. justify-content: space-around;
  648. }
  649. .scroll-tab-item {
  650. text-align: center;
  651. display: inline-block;
  652. padding: 32rpx 8rpx 30rpx 8rpx;
  653. border-bottom: 8rpx solid transparent;
  654. margin-right: 60rpx;
  655. position: relative;
  656. color: #999999;
  657. font-size: 32rpx;
  658. &:last-child {
  659. margin-right: 0;
  660. }
  661. &.active {
  662. border-bottom: none;
  663. color: #333;
  664. font-weight: 500;
  665. }
  666. .border_act {
  667. width: 80%;
  668. height: 8rpx;
  669. position: absolute;
  670. bottom: 0;
  671. left: 50%;
  672. transform: translateX(-50%);
  673. }
  674. }
  675. }
  676. }
  677. .content-bottom {
  678. background-color: #fff;
  679. text-align: center;
  680. line-height: 100rpx;
  681. color: #c4c4c4;
  682. font-size: 20rpx;
  683. }
  684. .checkbox-ui {
  685. width: 100%;
  686. padding: 30rpx 0;
  687. overflow: hidden;
  688. overflow-x: auto;
  689. display: flex;
  690. border-bottom: 1rpx solid #ececec;
  691. }
  692. .content-button {
  693. height: 100rpx;
  694. width: 100%;
  695. text-align: center;
  696. line-height: 100rpx;
  697. color: #3385ff;
  698. }
  699. }
  700. </style>