material.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704
  1. <template>
  2. <view class="container Index-container">
  3. <view class="top-content-box">
  4. <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
  5. <view class="content" @click="goSearch">
  6. <icon type="search" size="15" class="search_ico" />
  7. <text class="sea_ipt">{{ searchPlaceholderList.SummarySearch || "" }}</text>
  8. </view>
  9. </view>
  10. <view class="top-tabs">
  11. <block v-for="item in topTabBars" :key="item.Id">
  12. <view v-if="item.IsShow" :class="['item', item.val == topTabsActive && 'tabs-active']" @click="topTabsChange(item)">
  13. {{ item.Name }}
  14. <block v-if="(item.Id === 3 || item.Name == '图表') && wholeShowListData.IsShowChart">
  15. <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
  16. </block>
  17. <view class="active" v-if="item.Id == topTabsActive"></view>
  18. </view>
  19. </block>
  20. </view>
  21. <view class="tabs-content">
  22. <view class="second-tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
  23. <view :class="['item', item.ChartPermissionId == secondActive && 'tabs-active']" v-for="(item, index) in secondBars" :key="item.ChartPermissionId" @click="handleClickTopSub(item)">
  24. {{ item.PermissionName }}
  25. <block v-if="wholeShowListData.IsShowResearch && index === secondBars.length - 1 && topTabsActive == '2'">
  26. <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
  27. </block>
  28. <view class="active" v-if="item.ChartPermissionId == secondActive"></view>
  29. </view>
  30. </view>
  31. <block v-if="topTabsActive == '3'">
  32. <view class="children-ul">
  33. <view :class="['chart-children', chartChildrenActive == item.CtagId ? 'children-active' : '']" v-for="item in chartChildren" :key="item.CtagId" @click="handleChartChildren(item)">{{
  34. item.Name
  35. }}</view>
  36. </view>
  37. </block>
  38. <view v-if="topTabsActive == '4'" class="medium-ul">
  39. <view class="item-content">
  40. <view @click="mediumClickHandler(item)" :class="['item', mediumActive === item.value && 'item-act']" v-for="item in mediumSelect" :key="item.value">{{ item.name }}</view>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. <block v-if="haveData">
  46. <view class="content-ul">
  47. <block v-if="topTabsActive == 4">
  48. <view style="width: 49%" v-for="item in roadshowPageList" :key="item.Id">
  49. <RoadshowItem :list="item" @isCollectionHandeler="isCollectionHandeler" />
  50. </view>
  51. </block>
  52. <block v-else>
  53. <view class="report-ul" style="width: 49%">
  54. <block v-for="(item, index) in dataList" :key="index">
  55. <view v-if="index % 2 == 0">
  56. <ChartItem v-if="topTabsActive == 3" :list="item" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
  57. <ReportItem v-if="topTabsActive == 2" :list="item" />
  58. </view>
  59. </block>
  60. </view>
  61. <view class="report-ul" style="width: 49%">
  62. <block v-for="(item, index) in dataList" :key="index">
  63. <view v-if="index % 2 !== 0">
  64. <ChartItem v-if="topTabsActive == 3" :list="item" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
  65. <ReportItem v-if="topTabsActive == 2" :list="item" />
  66. </view>
  67. </block>
  68. </view>
  69. </block>
  70. </view>
  71. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="pageNum > 1" />
  72. </block>
  73. <view class="nodata" v-else-if="haveData === false" style="padding-top: 400rpx">
  74. <block class="nodata" v-if="!isBindingMobile && secondActive == 0">
  75. <text>请先绑定联系方式</text>
  76. <view class="bind-mobile" @click="bindingMobile">绑定联系方式</view>
  77. </block>
  78. <block v-else>
  79. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
  80. <text>{{ topTabsActive == 3 && secondActive == 0 ? "暂无收藏的图表" : "暂时没有数据" }}</text>
  81. </block>
  82. </view>
  83. <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  84. <suspenButton :show.sync="wholeShowListData.IsShow" v-if="wholeShowListData.IsShow" />
  85. </view>
  86. </template>
  87. <script>
  88. import { Home, Reports, Chart, activity } from "@/config/api.js";
  89. import { Throttle, deepCopy } from "@/config/util.js";
  90. import freeCharge from "@/components/freeCharge";
  91. import suspenButton from "@/components/suspen_button.vue";
  92. import ChartItem from "@/components/ItemComponent/chartItem.vue";
  93. import ReportItem from "@/components/ItemComponent/reportItem.vue";
  94. import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
  95. let app = getApp();
  96. export default {
  97. data() {
  98. return {
  99. topTabBars: [],
  100. topTabsActive: 2, //一级top的tabs
  101. secondActive: "", //二级的tabs
  102. secondBars: [], //二级的tabs数组
  103. chartChildren: [], //二级的tabs下的标签
  104. chartChildrenActive: 0,
  105. refresh: false,
  106. pageSize: 10, //条数
  107. pageNum: 1, //页码
  108. haveMore: true, //是否有更多数据
  109. haveData: null, //是否有数据
  110. //数据列表
  111. dataList: [],
  112. status: "loadmore",
  113. loadText: {
  114. loadmore: "上拉加载更多",
  115. loading: "加载中",
  116. nomore: "已经到底了",
  117. },
  118. showTransition: false, //点击绝密后的隐现
  119. isBindingMobile: true, //图表我的收藏是否绑定手机号
  120. videoContext: null,
  121. audioShareId: "", //通过分享单个音频点进页面时使用
  122. videoShareId: "", //通过分享单个视频点进页面时使用
  123. activityShareId: "",
  124. roadshowPageList: [], //音频 视频 list
  125. mediumSelect: [
  126. { name: "全部", value: 0 },
  127. { name: "视频", value: 1 },
  128. { name: "音频", value: 2 },
  129. ],
  130. mediumActive: 0,
  131. };
  132. },
  133. components: {
  134. freeCharge,
  135. suspenButton,
  136. ChartItem,
  137. ReportItem,
  138. RoadshowItem,
  139. },
  140. watch: {},
  141. onLoad(optios) {
  142. this.getHeaderTab();
  143. uni.getSystemInfo({
  144. success: function (res) {
  145. if (res.windowWidth > 700) {
  146. uni.reLaunch({
  147. url: "/pages/pcWebViev/pcWebViev",
  148. });
  149. }
  150. },
  151. });
  152. if (optios.topTabsActive) {
  153. this.topTabsActive = optios.topTabsActive;
  154. this.secondActive = optios.secondActive;
  155. this.chartChildrenActive = optios.childrenActive;
  156. this.videoShareId = optios.videoShareId;
  157. this.audioShareId = optios.audioShareId;
  158. this.activityShareId = optios.activityId;
  159. }
  160. this.getTabs();
  161. this.initNavBar();
  162. this.getReportList();
  163. this.$store.dispatch("checkHandle", "noGO");
  164. },
  165. onShow() {
  166. this.$store.commit("setRouterActivity", "纪要库");
  167. this.$store.commit("setRouterReport", "纪要库");
  168. //进入页面的记录
  169. this.$store.dispatch("statistics", { PageType: "Activit" });
  170. // #ifdef MP-WEIXIN
  171. uni.hideHomeButton();
  172. // #endif
  173. this.$store.commit("audioBg/parseIntAudio", true);
  174. },
  175. computed: {
  176. curVoiceId() {
  177. //当前正在播放的音频id
  178. return this.$store.state.audioBg.indexId;
  179. },
  180. curAudioPaused() {
  181. //当前音频是否暂停状态
  182. return this.$store.state.audioBg.paused;
  183. },
  184. showAudioBox() {
  185. return this.$store.state.audioBg.parseIntShow;
  186. },
  187. isMyChartCollection() {
  188. return this.topTabsActive == "3" && this.secondActive == 0;
  189. },
  190. },
  191. methods: {
  192. //获取胶囊位置
  193. initNavBar() {
  194. let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  195. this.navBarStyle = {
  196. height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
  197. paddingTop: menuButtonInfo.top - 4 + "px",
  198. paddingBottom: "4px",
  199. };
  200. },
  201. //点击顶部一级分类
  202. topTabsChange(item) {
  203. this.topTabsActive = item.Id;
  204. this.chartChildren = [];
  205. this.chartChildrenActive = 0;
  206. this.secondActive = "";
  207. this.pageNum = 1;
  208. this.dataList = [];
  209. this.audioShareId = "";
  210. this.videoShareId = "";
  211. uni.pageScrollTo({
  212. scrollTop: 0,
  213. duration: 0,
  214. });
  215. if (this.topTabsActive == "2" || this.topTabsActive == "3") {
  216. this.getTabs();
  217. } else {
  218. this.initData();
  219. }
  220. this.$store.commit("setRouterReport", item.Id === 3 ? "我的收藏" : "纪要库");
  221. },
  222. //点击顶部二级分类
  223. handleClickTopSub(item) {
  224. this.$store.commit("setRouterReport", item.PermissionName === "我的收藏" ? "我的收藏" : "纪要库");
  225. this.secondActive = item.ChartPermissionId;
  226. this.chartChildren = [];
  227. this.chartChildrenActive = 0;
  228. this.childrenChartData();
  229. this.initData();
  230. },
  231. //点击图标的二级分类 处理数据
  232. childrenChartData() {
  233. if (this.topTabsActive == 3 && this.secondActive != 0) {
  234. let arr = [];
  235. this.secondBars &&
  236. this.secondBars.forEach((item) => {
  237. if (this.secondActive == item.ChartPermissionId) {
  238. deepCopy(arr, item.List);
  239. arr.unshift({
  240. CtagId: 0,
  241. Name: "全部",
  242. });
  243. this.chartChildren = arr;
  244. }
  245. });
  246. this.chartChildrenActive > 0 ? "" : (this.chartChildrenActive = 0);
  247. }
  248. },
  249. //点击图标的三级分类
  250. handleChartChildren(item) {
  251. this.chartChildrenActive = item.CtagId;
  252. this.initData();
  253. },
  254. // 点击为路演的筛选
  255. mediumClickHandler(item) {
  256. this.mediumActive = item.value;
  257. this.initData();
  258. },
  259. //点击
  260. initData() {
  261. this.pageNum = 1;
  262. this.dataList = [];
  263. uni.pageScrollTo({
  264. scrollTop: 0,
  265. duration: 0,
  266. });
  267. this.getReportList();
  268. },
  269. /* 获取tab分类 */
  270. getTabs() {
  271. this.secondBars = [];
  272. this.topTabsActive == "2"
  273. ? Home.Tab().then((res) => {
  274. if (res.Ret === 200) {
  275. this.secondBars = res.Data.List;
  276. this.secondActive > 0 ? "" : (this.secondActive = this.secondBars[0].ChartPermissionId);
  277. this.getReportList();
  278. }
  279. })
  280. : this.topTabsActive == "3"
  281. ? Chart.getChartPatg().then((res) => {
  282. if (res.Ret === 200) {
  283. let arr = res.Data;
  284. arr.unshift({
  285. ChartPermissionId: 0,
  286. PermissionName: "我的收藏",
  287. });
  288. this.secondBars = arr;
  289. this.secondActive ? "" : (this.secondActive = 0);
  290. this.secondActive > 0 && this.childrenChartData();
  291. this.getReportList();
  292. }
  293. })
  294. : "";
  295. },
  296. /* 获取列表 */
  297. async getReportList() {
  298. if (this.topTabsActive == "3" && this.secondActive == 0) {
  299. const res = await Chart.getChartcollection({
  300. PageSize: this.pageSize,
  301. CurrentIndex: this.pageNum,
  302. });
  303. if (res.Ret === 200) {
  304. this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
  305. this.isBindingMobile = res.Data.IsBindingMobile;
  306. if (this.pageNum === 1) {
  307. this.dataList = res.Data.List || [];
  308. this.haveData = this.dataList.length > 0 ? true : false;
  309. } else {
  310. this.dataList = this.dataList.concat(res.Data.List);
  311. }
  312. }
  313. } else if (this.topTabsActive == 4) {
  314. const res = await Home.microRoadshowList({
  315. PageSize: this.pageSize,
  316. CurrentIndex: this.pageNum,
  317. AudioId: this.audioShareId,
  318. VideoId: this.activityShareId ? "" : this.videoShareId,
  319. ActivityVideoId: this.activityShareId && this.videoShareId,
  320. Filter: this.mediumActive,
  321. });
  322. if (res.Ret === 200) {
  323. this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
  324. if (this.pageNum == 1) {
  325. this.roadshowPageList = res.Data.List || [];
  326. this.haveData = this.roadshowPageList.length > 0 ? true : false;
  327. if (this.refresh) {
  328. uni.stopPullDownRefresh();
  329. this.refresh = false;
  330. }
  331. } else {
  332. this.roadshowPageList = this.roadshowPageList.concat(res.Data.List);
  333. }
  334. }
  335. } else {
  336. const res = await Home.getList({
  337. PageSize: this.pageSize,
  338. CurrentIndex: this.pageNum,
  339. ChartPermissionId: this.secondActive,
  340. CtagId: this.chartChildrenActive,
  341. ListType: this.topTabsActive,
  342. });
  343. if (res.Ret === 200) {
  344. this.processingData(res);
  345. }
  346. }
  347. },
  348. //处理数据
  349. processingData(res) {
  350. if (!res.Data.HaveResearch) {
  351. this.$util.modalShow("", "您暂无查看买方研选权限", "", () => {
  352. uni.reLaunch({
  353. url: "/pages/index/index",
  354. });
  355. });
  356. }
  357. this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
  358. res.Data.List &&
  359. res.Data.List.forEach((item) => {
  360. if (item.BodyHtml) {
  361. item.BodyHtml = item.BodyHtml.replace(/'\'/g, "");
  362. }
  363. });
  364. if (this.topTabsActive == "2") {
  365. if (this.pageNum === 1) {
  366. this.dataList = res.Data.List || [];
  367. this.haveData = this.dataList.length ? true : false;
  368. } else {
  369. this.dataList = this.dataList.concat(res.Data.List);
  370. }
  371. } else {
  372. if (this.pageNum === 1) {
  373. this.haveData = res.Data.List ? true : res.Data.ChartList ? true : false;
  374. }
  375. if (!res.Data.List) {
  376. this.dataList = this.dataList.concat(res.Data.ChartList);
  377. } else if (!res.Data.ChartList) {
  378. this.dataList = this.dataList.concat(res.Data.List);
  379. } else {
  380. this.dataList.push(res.Data.List.shift());
  381. let newArr = [];
  382. let newArrTwo = [];
  383. for (let i = 0; i < res.Data.List.length; i += 2) {
  384. newArr.push(res.Data.List.slice(i, i + 2));
  385. }
  386. for (let i = 0; i < res.Data.ChartList.length; i += 2) {
  387. newArrTwo.push(res.Data.ChartList.slice(i, i + 2));
  388. }
  389. let arr = [];
  390. newArr.forEach((item, index) => {
  391. if (newArrTwo[index]) {
  392. arr.push(newArrTwo[index], item);
  393. } else {
  394. arr.push(item);
  395. }
  396. });
  397. this.dataList = this.dataList.concat(arr.flat(Infinity));
  398. }
  399. }
  400. if (this.refresh) {
  401. uni.stopPullDownRefresh();
  402. this.refresh = false;
  403. }
  404. },
  405. //我的收藏的删除
  406. myChartCollect(id) {
  407. uni.showModal({
  408. content: "确认要将该图表移除我的收藏吗?",
  409. confirmColor: "#3385FF",
  410. cancelColor: "#606266",
  411. success: async (res) => {
  412. if (res.confirm) {
  413. const res = await Chart.myChartCollect({
  414. ChartId: id,
  415. });
  416. if (res.Ret === 200) {
  417. this.initData();
  418. this.$util.toast("已取消收藏");
  419. }
  420. }
  421. },
  422. });
  423. },
  424. //我的收藏 置顶
  425. async myChartIsTop(id) {
  426. const res = await Chart.myChartTop({
  427. ChartId: id,
  428. });
  429. if (res.Ret === 200) {
  430. this.initData();
  431. this.$util.toast(res.Msg);
  432. }
  433. },
  434. /* 搜索 */
  435. goSearch() {
  436. this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive);
  437. },
  438. /* 绑定联系方式 */
  439. bindingMobile() {
  440. uni.navigateTo({
  441. url: "/pageMy/login/login",
  442. });
  443. },
  444. //获取顶部导航
  445. async getHeaderTab() {
  446. const res = await Home.headerTab();
  447. if (res.Ret === 200) {
  448. this.topTabBars = res.Data || [];
  449. }
  450. },
  451. // 微路演收藏
  452. async isCollectionHandeler(item) {
  453. const res = await Home.microRoadshowCollect({
  454. Id: item.Id,
  455. SourceType: item.Type,
  456. });
  457. if (res.Ret === 200) {
  458. let index = this.roadshowPageList.findIndex((key) => key.Id == item.Id);
  459. res.Data.Status == 1 ? (this.roadshowPageList[index].IsCollect = true) : (this.roadshowPageList[index].IsCollect = false);
  460. uni.showToast({
  461. title: res.Msg,
  462. duration: 2000,
  463. });
  464. }
  465. },
  466. },
  467. onHide() {
  468. this.$store.commit("audioBg/parseIntAudio", false);
  469. },
  470. mounted() {
  471. uni.$on("updateAudioVideo", (data) => {
  472. this.$store.dispatch("checkHandle", "noGO");
  473. this.getReportList();
  474. });
  475. },
  476. /* 下拉刷新 */
  477. onPullDownRefresh: Throttle(function () {
  478. this.audioShareId = "";
  479. this.videoShareId = "";
  480. this.activityShareId = "";
  481. this.status = "loadmore";
  482. this.refresh = true;
  483. this.dataList = [];
  484. this.pageNum = 1;
  485. this.getReportList();
  486. }),
  487. // 上拉加载
  488. onReachBottom: Throttle(function () {
  489. if (this.status === "nomore") return;
  490. this.status = "loading";
  491. this.pageNum++;
  492. this.getReportList();
  493. }),
  494. /** 用户点击分享*/
  495. onShareAppMessage: function ({ from, target }) {
  496. if (from === "button") {
  497. let item = target.dataset.item;
  498. let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
  499. // type=2 -- 活动视频 type=3 -- 产业视频
  500. let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
  501. let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
  502. let title_share = item.AudioTitle || item.Title;
  503. return {
  504. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : title_share,
  505. path: "/pages/material/material?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
  506. imageUrl: item.AudioShareImg || item.ShareImg,
  507. };
  508. } else {
  509. return {
  510. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "素材库",
  511. path: "/pages/material/material?topTabsActive=" + this.topTabsActive + "&secondActive=" + this.secondActive + "&childrenActive=" + this.chartChildrenActive,
  512. success: (res) => {},
  513. fail: (err) => {},
  514. };
  515. }
  516. },
  517. };
  518. </script>
  519. <style lang="scss">
  520. .Index-container {
  521. background-color: #f7f7f7;
  522. font-size: 30rpx;
  523. .content-ul {
  524. display: flex;
  525. flex-wrap: wrap;
  526. justify-content: space-between;
  527. padding: 20rpx 15rpx;
  528. }
  529. .top-content-box {
  530. position: sticky;
  531. top: 0;
  532. left: 0;
  533. width: 100%;
  534. z-index: 9;
  535. .top-tabs {
  536. width: 100%;
  537. display: flex;
  538. align-items: center;
  539. justify-content: center;
  540. font-size: 34rpx;
  541. background-color: #fff;
  542. padding: 35rpx 0 10rpx;
  543. &::-webkit-scrollbar {
  544. width: 0;
  545. height: 0;
  546. display: none;
  547. }
  548. .item {
  549. position: relative;
  550. padding-bottom: 8rpx;
  551. margin-right: 60rpx;
  552. flex-shrink: 0;
  553. .limit-img {
  554. position: absolute;
  555. top: -15rpx;
  556. right: -50rpx;
  557. z-index: 99;
  558. }
  559. .active {
  560. position: absolute;
  561. left: 0;
  562. bottom: 0;
  563. height: 4rpx;
  564. width: 100%;
  565. border-radius: 1rpx;
  566. background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
  567. }
  568. }
  569. .tabs-active {
  570. color: #3385ff;
  571. font-weight: 500;
  572. }
  573. }
  574. }
  575. .nav-bar-wrap {
  576. background-color: #fff;
  577. width: 100%;
  578. padding-left: 35rpx;
  579. display: flex;
  580. align-items: center;
  581. .content {
  582. position: relative;
  583. display: flex;
  584. align-items: center;
  585. width: 70%;
  586. height: 63rpx;
  587. font-size: 30rpx;
  588. color: #8d8d8d;
  589. background-color: #f6f6f6;
  590. padding-left: 33rpx;
  591. border-radius: 70rpx;
  592. .sea_ipt {
  593. padding-left: 15rpx;
  594. }
  595. }
  596. }
  597. .tabs-content {
  598. padding: 0 30rpx;
  599. background-color: #fff;
  600. .children-ul {
  601. display: flex;
  602. flex-wrap: wrap;
  603. .children-active {
  604. background-color: #3385ff;
  605. color: #fff;
  606. }
  607. }
  608. .medium-ul {
  609. display: flex;
  610. justify-content: flex-end;
  611. padding: 10px 0;
  612. .item-content {
  613. display: flex;
  614. height: 51rpx;
  615. background: #f8f8fa;
  616. width: 345rpx;
  617. border-radius: 64rpx;
  618. color: #999999;
  619. }
  620. .item {
  621. display: flex;
  622. align-items: center;
  623. justify-content: center;
  624. width: 115rpx;
  625. height: 51rpx;
  626. border-radius: 47rpx;
  627. }
  628. .item-act {
  629. background-color: #3385ff;
  630. color: #fff;
  631. }
  632. }
  633. .chart-children {
  634. padding: 10rpx 20rpx;
  635. margin: 0rpx 20rpx 20rpx 0;
  636. background-color: #f9f9f9;
  637. color: #666666;
  638. font-size: 26rpx;
  639. border-radius: 4rpx;
  640. }
  641. }
  642. .second-tabs {
  643. width: 100%;
  644. display: flex;
  645. overflow-x: auto;
  646. background-color: #fff;
  647. font-size: 30rpx;
  648. color: #999999;
  649. padding: 20rpx 0;
  650. &::-webkit-scrollbar {
  651. width: 0;
  652. height: 0;
  653. display: none;
  654. }
  655. .item {
  656. position: relative;
  657. padding-bottom: 16rpx;
  658. margin-right: 50rpx;
  659. flex-shrink: 0;
  660. .limit-img {
  661. position: absolute;
  662. top: -15rpx;
  663. right: -50rpx;
  664. z-index: 99;
  665. }
  666. .active {
  667. position: absolute;
  668. left: 0;
  669. bottom: 0;
  670. height: 4rpx;
  671. width: 100%;
  672. border-radius: 1rpx;
  673. background: linear-gradient(90deg, #2e85ff 0%, #7eeaf6 100%);
  674. }
  675. }
  676. .tabs-active {
  677. color: #3385ff;
  678. font-weight: 500;
  679. }
  680. }
  681. .tabs-img {
  682. width: 46rpx;
  683. height: 26rpx;
  684. }
  685. .nodata {
  686. font-size: 40rpx;
  687. .bind-mobile {
  688. width: 244rpx;
  689. height: 58rpx;
  690. background: #3385ff;
  691. border-radius: 8rpx;
  692. font-size: 28rpx;
  693. line-height: 58rpx;
  694. text-align: center;
  695. color: #fff;
  696. margin: 50rpx auto;
  697. }
  698. }
  699. }
  700. </style>