IndustryReport.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693
  1. <template>
  2. <view class="container industry-content" id="industry-content">
  3. <view v-if="haveData">
  4. <view class="content-top">
  5. <view class="top-bg">
  6. <!-- 详情封面图 -->
  7. <image :src="industryVideo.DetailImgUrl" class="industry-video-poster" v-show="industryVideo.Id && industryVideo.DetailImgUrl && !havePlayed" @click="handelVideoPlay"></image>
  8. <!-- 视频 -->
  9. <video :src="industryVideo.ResourceUrl" class="industry-video" id="industry-video" v-show="industryVideo.ResourceUrl && (havePlayed || !industryVideo.DetailImgUrl)" controls></video>
  10. <view class="top-bg-title" :style="{ height: industryVideo.Id ? '70rpx' : '99rpx', 'background-color': industryVideo.Id ? 'white' : '#d1ebff' }">产业赛道布局于{{ layoutTime }}</view>
  11. </view>
  12. <!-- industryVideo.ResourceUrl -- 视频url -->
  13. <view class="top-box" :style="{ top: industryVideo.Id ? '418rpx' : '99rpx' }">
  14. <view class="top-tab-cont">
  15. <view class="tab-cont">
  16. <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
  17. <block v-for="(item, index) in tabBars" :key="item.CategoryId">
  18. <view :id="'_' + index" class="scroll-tab-item" :class="{ active: tabAct_id == item.CategoryId }" @click.stop="toggleTab(item, index)">
  19. {{ item.MatchTypeName }}
  20. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tabAct_id == item.CategoryId"></image>
  21. <text class="reg-hint" v-if="item.IsRed"></text>
  22. </view>
  23. </block>
  24. </scroll-view>
  25. </view>
  26. <view class="lucency" v-if="tabBars.length > 6"></view>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="collect-ul" :style="{ 'padding-top': industryVideo.ResourceUrl ? '528rpx' : '210rpx' }">
  31. <!-- 其他tab -->
  32. <block v-show="tabAct_id !== 99999">
  33. <view class="collect-ltem" v-for="(item, index) in collectList" :key="index" @click="goDetail(item, index)">
  34. <view class="item-left">
  35. <text class="title text_twoLine"
  36. >{{ item.Title }}
  37. <text class="reg-text" v-if="item.IsRed"></text>
  38. </text>
  39. <text class="text_twoLine desc">{{ item.PublishDate }}</text>
  40. </view>
  41. <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
  42. </view>
  43. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1 && tabAct_id !== 99999" />
  44. </block>
  45. <!-- 时间线 -->
  46. <block v-if="tabAct_id === 99999">
  47. <view class="time-line">
  48. <view class="line-item" v-for="(item, index) in timeLine" :key="index" @click="goDetailFromTimeLine(item, index)">
  49. <view class="time">{{ item.date }}</view>
  50. <view class="content" v-if="item.Content.length">
  51. <text class="content-reg" v-if="item.IsRed"></text>
  52. <rich-text class="rich-text" :style="{ height: item.isExpand ? 'auto' : richTextHeight + 'px' }" :data-index="index" :class="{ expand: item.isExpand }" :nodes="item.Content">
  53. </rich-text>
  54. <view class="expan-btn" :class="{ pos: !item.isExpand }" @click="handleExpand(item, index)" v-if="item.isShowBtn">{{ item.isExpand ? "收起" : "展开" }}</view>
  55. </view>
  56. <view class="title" v-else>{{ item.Title }}</view>
  57. </view>
  58. <view v-show="loadTimeLine" class="loadTimeLine"></view>
  59. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1 && tabAct_id === 99999" />
  60. </view>
  61. </block>
  62. </view>
  63. </view>
  64. <view class="nodata" v-else>
  65. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
  66. <text>暂时没有报告的内容</text>
  67. </view>
  68. <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  69. <!-- 权限弹窗 -->
  70. <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
  71. </view>
  72. </template>
  73. <script>
  74. import { Mine, Home } from "@/config/api.js";
  75. import { Reports } from "@/config/api.js";
  76. import { Throttle } from "@/config/util.js";
  77. import freeCharge from "@/components/freeCharge";
  78. import modalDialog from "@/components/modalDialog.vue";
  79. let app = getApp({ allowDefault: true });
  80. export default {
  81. data() {
  82. return {
  83. tabAct_id: "",
  84. tabBars: [],
  85. industrialManagementId: "",
  86. layoutTime: "",
  87. refresh: false, //正在下拉
  88. page_no: 1,
  89. pageSize: 10,
  90. categoryId: "",
  91. collectList: [],
  92. isShow: false,
  93. haveData: true,
  94. status: "loadmore",
  95. loadText: {
  96. loadmore: "上拉加载更多",
  97. loading: "加载中",
  98. nomore: "已经到底了",
  99. },
  100. totalPage: "",
  101. toggleTabIndex: 0,
  102. titleReport: "",
  103. pcTabActive: "",
  104. industryVideo: {},
  105. authInfo: {},
  106. havePlayed: false,
  107. isShowhasPermission: false, // 联系销售的提交申请
  108. applyForIsShow: false, // 提交申请
  109. jurisdictionList: {},
  110. hasPermission: "", //权限
  111. timeLine: [], //时间线数据
  112. mockTimeLine: [
  113. {
  114. date: "不重要",
  115. Content: "<p>hello,world</p><p>hello,world</p><p>hello,world</p>",
  116. }, //第一项是为了获取当前手机下,三行是多少相对高度
  117. ],
  118. loadTimeLine: false, //时间线的遮罩
  119. richTextHeight: 1000, //晨会富文本最大高度
  120. };
  121. },
  122. onLoad(option) {
  123. this.industrialManagementId = option.id;
  124. this.tabAct_id = option.tab;
  125. this.toArticleCategoryList();
  126. },
  127. onShow() {
  128. this.$store.dispatch("statistics", { PageType: "IndustryList", IndustrialManagementId: this.industrialManagementId });
  129. },
  130. components: {
  131. freeCharge,
  132. modalDialog,
  133. },
  134. watch: {
  135. //监听tabs的变化
  136. tabAct_id: {
  137. handler(newVal) {
  138. if (newVal) {
  139. this.page_no = 1;
  140. this.collectList = [];
  141. this.getCollectList();
  142. }
  143. },
  144. immediate: true,
  145. },
  146. },
  147. methods: {
  148. //tabs切换事件
  149. toggleTab(item, index) {
  150. this.toggleTabIndex = index;
  151. if (this.tabAct_id !== item.CategoryId) {
  152. this.tabAct_id = item.CategoryId;
  153. this.pageNum = 1;
  154. this.timeLine = [];
  155. this.totalPage = "";
  156. uni.pageScrollTo({
  157. scrollTop: 0,
  158. duration: 0,
  159. });
  160. }
  161. },
  162. toArticleCategoryList() {
  163. Reports.toArticleCategoryList({
  164. IndustrialManagementId: this.industrialManagementId,
  165. ShowTimeLine: 1,
  166. PageRouter: this.$store.state.pageRouterReport,
  167. }).then((res) => {
  168. if (res.Ret == 200) {
  169. uni.setNavigationBarTitle({
  170. title: res.Data.IndustryName,
  171. });
  172. this.titleReport = res.Data.IndustryName;
  173. this.layoutTime = res.Data.LayoutTime;
  174. this.industryVideo = res.Data.IndustryVideo;
  175. this.authInfo = res.Data.AuthInfo;
  176. if (res.Data.List) {
  177. this.tabAct_id = res.Data.List[0].CategoryId;
  178. this.tabBars = res.Data.List;
  179. }
  180. }
  181. });
  182. },
  183. /* 获取列表 */
  184. getCollectList() {
  185. //just for test
  186. if (this.tabAct_id === 99999) {
  187. Reports.getArticleList({
  188. PageSize: this.pageSize,
  189. CurrentIndex: this.page_no,
  190. CategoryId: 99999,
  191. IndustrialManagementId: this.industrialManagementId,
  192. }).then((res) => {
  193. if (res.Ret === 200) {
  194. this.loadTimeLine = true;
  195. this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
  196. this.totalPage = res.Data.Paging.Pages;
  197. let list = res.Data.List || [];
  198. list = list.map((item) => {
  199. let temp = item;
  200. temp.date = item.PublishTime.split(" ")[0];
  201. if (item.Content.length) {
  202. temp.isExpand = true;
  203. temp.isShowBtn = true;
  204. }
  205. return temp;
  206. });
  207. if (this.page_no === 1) {
  208. this.timeLine = list;
  209. this.haveData = this.timeLine.length ? true : false;
  210. if (this.refresh) {
  211. uni.stopPullDownRefresh();
  212. this.refresh = false;
  213. }
  214. } else {
  215. this.timeLine = this.timeLine.concat(list);
  216. }
  217. }
  218. this.timeLine.unshift(this.mockTimeLine[0]);
  219. //在获取高度前把所有的晨会展开,收起的话无法获取正确高度
  220. this.timeLine.forEach((item) => {
  221. if (item.Content.length) {
  222. item.isExpand = true;
  223. item.isShowBtn = true;
  224. }
  225. });
  226. setTimeout(() => {
  227. this.getConentsHeight();
  228. }, 0);
  229. });
  230. return;
  231. }
  232. Reports.getArticleList({
  233. PageSize: this.pageSize,
  234. CurrentIndex: this.page_no,
  235. CategoryId: this.tabAct_id,
  236. IndustrialManagementId: this.industrialManagementId,
  237. }).then((res) => {
  238. if (res.Ret === 200) {
  239. this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
  240. this.totalPage = res.Data.Paging.Pages; //总页数
  241. if (this.page_no === 1) {
  242. this.pcTabActive = res.Data.ChartPermissionId;
  243. this.collectList = res.Data.List || [];
  244. this.haveData = this.collectList.length ? true : false;
  245. if (this.refresh) {
  246. uni.stopPullDownRefresh();
  247. this.refresh = false;
  248. }
  249. } else {
  250. this.collectList = this.collectList.concat(res.Data.List);
  251. }
  252. }
  253. });
  254. },
  255. async goDetail(item, index) {
  256. /* 无需授权且已绑定 检验是或否有权限 */
  257. await this.$store.dispatch("checkHandle");
  258. if (!this.$store.state.isAuth && !this.$store.state.isBind) {
  259. // 已授权已绑定
  260. if (item.SubCategoryName === "路演精华") {
  261. //跳转路演精华
  262. uni.navigateTo({
  263. url: "/reportPages/roadEssence/roadEssence?id=" + item.ArticleId,
  264. });
  265. } else {
  266. this.setRouter();
  267. uni.navigateTo({
  268. url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId,
  269. });
  270. }
  271. }
  272. },
  273. // 视频播放权限判断
  274. handelVideoPlay() {
  275. this.$store.commit("setRouterReport", "资源包详情页");
  276. if (!this.$store.state.isAuth && !this.$store.state.isBind) {
  277. if (this.authInfo.HasPermission == 1) {
  278. this.playVideo();
  279. } else {
  280. this.hasPermission = this.authInfo.HasPermission;
  281. this.jurisdictionList.ActivityId = this.industryVideo.Id;
  282. this.jurisdictionList.isAudioVideo = 3;
  283. if (this.hasPermission == 2) {
  284. this.jurisdictionList.SellerMobile = this.authInfo.SellerMobile;
  285. this.jurisdictionList.SellerName = this.authInfo.SellerName;
  286. this.jurisdictionList.PopupMsg = this.authInfo.PopupMsg;
  287. this.isShowhasPermission = true;
  288. } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
  289. this.jurisdictionList.PopupMsg = this.authInfo.PopupMsg;
  290. this.applyForIsShow = true;
  291. }
  292. }
  293. } else {
  294. this.$store.dispatch("checkHandle");
  295. }
  296. },
  297. // 播放视频
  298. playVideo() {
  299. const query = uni.createSelectorQuery().in(this);
  300. query
  301. .select("#industry-video")
  302. .context((data) => {
  303. data.context.play();
  304. this.handelVideoBindplay();
  305. setTimeout(() => {
  306. this.havePlayed = true;
  307. }, 10);
  308. })
  309. .exec();
  310. },
  311. //
  312. async handelVideoBindplay() {
  313. const res = await Home.microAideoHistoryAdd({ VideoId: this.industryVideo.Id, SourceType: 1, PageRouter: this.$store.state.pageRouterReport });
  314. },
  315. //展开收起晨会内容
  316. handleExpand(item, index) {
  317. this.getRecordTracking("展开收起", { Id: item.Id });
  318. item.isExpand = !item.isExpand;
  319. this.timeLine.splice(index, 1, item);
  320. },
  321. //获取所有晨会内容的高度并决定是否显示展开收起按钮
  322. getConentsHeight() {
  323. const query = wx.createSelectorQuery();
  324. query.selectAll(".rich-text").boundingClientRect();
  325. query.exec((res) => {
  326. //根据timeLine的第一项确定当前手机三行文字的高度
  327. const standardHeight = res[0][0].height;
  328. this.richTextHeight = standardHeight;
  329. res[0].forEach((item) => {
  330. let temp = this.timeLine[item.dataset.index];
  331. //超过这个高度的,需要显示展开/收起按钮
  332. if (item.height > standardHeight) {
  333. temp.isExpand = false;
  334. temp.isShowBtn = true;
  335. } else {
  336. temp.isExpand = true;
  337. temp.isShowBtn = false;
  338. }
  339. });
  340. //然后把timeLine的第一项扔掉
  341. this.timeLine.shift();
  342. this.loadTimeLine = false;
  343. });
  344. },
  345. async goDetailFromTimeLine(item, index) {
  346. if (item.Content.length !== 0) return;
  347. await this.$store.dispatch("checkHandle");
  348. if (!this.$store.state.isAuth && !this.$store.state.isBind) {
  349. // 已授权已绑定
  350. if (item.SubCategoryName === "路演精华") {
  351. //跳转路演精华
  352. uni.navigateTo({
  353. url: "/reportPages/roadEssence/roadEssence?id=" + item.Id,
  354. });
  355. } else {
  356. this.setRouter();
  357. uni.navigateTo({
  358. url: "/pageMy/reportDetail/reportDetail?id=" + item.Id,
  359. });
  360. }
  361. }
  362. },
  363. getNode(content, isExpand) {
  364. return `<div style='-webkit-line-clamp: ${isExpand ? 9999 : 3};-webkit-box-orient: vertical;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;'>${content}</div>`;
  365. },
  366. // 去往文章详情的
  367. setRouter() {
  368. this.tabBars.forEach((item) => {
  369. if (this.tabAct_id == item.CategoryId) {
  370. this.$store.commit("setRouterReport", item.MatchTypeName);
  371. }
  372. });
  373. },
  374. },
  375. /* 触底 */
  376. onReachBottom: Throttle(function () {
  377. if (this.status === "nomore") return;
  378. this.status = "loading";
  379. this.page_no++;
  380. if (this.tabAct_id) {
  381. this.getCollectList();
  382. }
  383. }),
  384. /* 下拉刷新 */
  385. onPullDownRefresh: Throttle(function () {
  386. if (this.tabAct_id) {
  387. this.page_no = 1;
  388. this.refresh = true;
  389. this.getCollectList();
  390. }
  391. }),
  392. /**
  393. * 用户点击分享
  394. */
  395. onShareAppMessage: function (res) {
  396. return {
  397. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : this.titleReport,
  398. path: "/reportPages/IndustryReport/IndustryReport?id=" + this.industrialManagementId + "&tab=" + this.tabAct_id + "&tabs=" + this.pcTabActive,
  399. success: (res) => {},
  400. fail: (err) => {},
  401. };
  402. },
  403. };
  404. </script>
  405. <style lang="scss">
  406. .industry-content {
  407. background-color: #f7f7f7;
  408. // height: 100vh;
  409. .top-bg {
  410. position: fixed;
  411. top: 0;
  412. left: 0;
  413. width: 100%;
  414. z-index: 100;
  415. background-color: white;
  416. text-align: center;
  417. .industry-video-poster {
  418. border-radius: 8rpx 8rpx 0 0;
  419. height: 340rpx;
  420. width: 728rpx;
  421. }
  422. .industry-video {
  423. height: 340rpx;
  424. width: 728rpx;
  425. }
  426. .top-bg-title {
  427. height: 99rpx;
  428. color: #2c83ff;
  429. background-color: #d1ebff;
  430. font-size: 28rpx;
  431. display: flex;
  432. align-items: center;
  433. justify-content: center;
  434. }
  435. .test {
  436. position: relative;
  437. span {
  438. position: absolute;
  439. left: 30rpx;
  440. bottom: 30rpx;
  441. color: white;
  442. }
  443. }
  444. }
  445. .top-box {
  446. position: fixed;
  447. width: 100%;
  448. top: 99rpx;
  449. left: 0;
  450. z-index: 100;
  451. }
  452. .top-tab-cont {
  453. .lucency {
  454. position: absolute;
  455. top: 0;
  456. right: 0;
  457. width: 32px;
  458. height: 30px;
  459. opacity: 0.9;
  460. background-color: #fff;
  461. }
  462. .tab-cont {
  463. padding: retu;
  464. padding: 30rpx 26rpx 0;
  465. background-color: #fff;
  466. font-size: 32rpx;
  467. box-shadow: 0 3rpx 6rpx rgba(187, 216, 255, 0.2);
  468. .scroll-tab {
  469. width: 100%;
  470. white-space: nowrap;
  471. }
  472. .scroll-tab-item {
  473. // flex-grow: 1;
  474. text-align: center;
  475. display: inline-block;
  476. padding: 0rpx 8rpx 30rpx 8rpx;
  477. margin-right: 60rpx;
  478. border-bottom: 8rpx solid transparent;
  479. position: relative;
  480. &:last-child {
  481. margin-right: 0;
  482. }
  483. &.active {
  484. border-bottom: none;
  485. color: #2c83ff;
  486. font-weight: 700;
  487. }
  488. .border_act {
  489. width: 100%;
  490. height: 8rpx;
  491. position: absolute;
  492. bottom: 0;
  493. left: 0;
  494. }
  495. .reg-hint {
  496. position: absolute;
  497. top: 0rpx;
  498. right: -10rpx;
  499. width: 14rpx;
  500. height: 14rpx;
  501. background-color: #ff0000;
  502. border-radius: 50%;
  503. }
  504. }
  505. }
  506. }
  507. .collect-ul {
  508. // margin-top: 30rpx;s
  509. padding-top: 210rpx;
  510. // padding-top: 4rpx;
  511. .collect-ltem {
  512. display: flex;
  513. padding: 30rpx 34rpx;
  514. background: #fff;
  515. margin-bottom: 4rpx;
  516. align-items: center;
  517. justify-content: space-between;
  518. .title {
  519. position: relative;
  520. max-width: 625rpx;
  521. color: #4a4a4a;
  522. font-size: 34rpx;
  523. padding-left: 28rpx;
  524. .reg-text {
  525. position: absolute;
  526. top: 15rpx;
  527. left: 0rpx;
  528. width: 14rpx;
  529. height: 14rpx;
  530. background-color: #ff0000;
  531. border-radius: 50%;
  532. z-index: 9;
  533. }
  534. }
  535. .desc {
  536. margin-top: 17rpx;
  537. padding-left: 28rpx;
  538. width: 625rpx;
  539. color: #999;
  540. }
  541. }
  542. .time-line {
  543. margin-top: 15rpx;
  544. padding: 30rpx 40rpx 50rpx 40rpx;
  545. min-height: calc(100vh - 190rpx);
  546. background-color: #ffffff;
  547. position: relative;
  548. .loadTimeLine {
  549. top: 0;
  550. bottom: 0;
  551. left: 0;
  552. right: 0;
  553. position: absolute;
  554. background-color: #fff;
  555. z-index: 6;
  556. }
  557. .line-item {
  558. position: relative;
  559. padding: 0 0 50rpx 40rpx;
  560. /* border-left:1rpx solid #DAE9FD; */
  561. &:last-child {
  562. padding-bottom: 0;
  563. &::after {
  564. height: calc(100% - 25rpx);
  565. }
  566. }
  567. &:first-child {
  568. .time {
  569. &::after {
  570. background-color: #3385ff;
  571. }
  572. }
  573. }
  574. &::before,
  575. &::after {
  576. position: absolute;
  577. content: "";
  578. }
  579. &::before {
  580. width: 24rpx;
  581. height: 24rpx;
  582. background-color: #dae9fd;
  583. z-index: 1;
  584. left: 0;
  585. top: 27rpx;
  586. transform: translate(-50%, -50%);
  587. border-radius: 50%;
  588. }
  589. &::after {
  590. top: 17rpx;
  591. left: 0;
  592. width: 1rpx;
  593. height: calc(100%);
  594. background-color: #dae9fd;
  595. z-index: 2;
  596. }
  597. .time {
  598. width: 245rpx;
  599. height: 55rpx;
  600. text-align: center;
  601. line-height: 45rpx;
  602. padding: 5rpx 20rpx;
  603. background-color: #f5f9ff;
  604. border-radius: 64rpx;
  605. color: #5181c9;
  606. font-size: 32rpx;
  607. margin-bottom: 20rpx;
  608. position: relative;
  609. &::before,
  610. &::after {
  611. position: absolute;
  612. content: "";
  613. left: -36rpx;
  614. top: 27rpx;
  615. width: 24rpx;
  616. height: 1rpx;
  617. background-color: #dae9fd;
  618. z-index: 1;
  619. }
  620. &::after {
  621. left: -40rpx;
  622. top: 27rpx;
  623. width: 12rpx;
  624. height: 12rpx;
  625. border-radius: 50%;
  626. transform: translate(-50%, -50%);
  627. background-color: #9dc5ff;
  628. z-index: 3;
  629. }
  630. }
  631. .content {
  632. color: #666666;
  633. position: relative;
  634. .rich-text {
  635. overflow: hidden;
  636. text-overflow: ellipsis;
  637. text-align: justify;
  638. display: -webkit-box;
  639. -webkit-line-clamp: 3;
  640. -webkit-box-orient: vertical;
  641. position: relative;
  642. &.expand {
  643. -webkit-line-clamp: 999;
  644. height: auto;
  645. }
  646. }
  647. .expan-btn {
  648. color: #2c83ff;
  649. text-align: right;
  650. &.pos {
  651. padding: 0 0 0 40rpx;
  652. background-color: rgba(255, 255, 255, 0.882);
  653. position: absolute;
  654. right: 0;
  655. bottom: 0;
  656. }
  657. }
  658. .content-reg {
  659. position: absolute;
  660. top: 10rpx;
  661. left: -20rpx;
  662. width: 14rpx;
  663. height: 14rpx;
  664. background-color: #ff0000;
  665. border-radius: 50%;
  666. }
  667. }
  668. .title {
  669. color: #3385ff;
  670. }
  671. }
  672. }
  673. }
  674. }
  675. #industry-content {
  676. .industry-video-module {
  677. .global-video-box {
  678. .video-content {
  679. top: 400rpx !important;
  680. }
  681. .close-icon {
  682. top: 330rpx !important;
  683. }
  684. }
  685. }
  686. }
  687. </style>