reportPage.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840
  1. <template>
  2. <block>
  3. <view class="container reportDetail-container" v-if="isUserBindingPhoneNumber">
  4. <block v-if="haveAuth === 1">
  5. <web-view :src="strategyUrl + '?url=' + linkurl" v-if="linkurl">
  6. <cover-view class="search-view">
  7. <cover-view class="search-view-box" v-if="reportInfo.IsShowFollowButton">
  8. <cover-view>若无需此赛道更新推送,请点击</cover-view>
  9. <cover-image
  10. class="search-icon"
  11. @click="isFollowHandler"
  12. :src="reportInfo.IsFollowButton ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/close_follow.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/follow_.png'"
  13. ></cover-image>
  14. </cover-view>
  15. </cover-view>
  16. <cover-view class="footer-con">
  17. <cover-view class="handle-item" @click="goRevolvePage">
  18. <cover-image class="download-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/report-revolve.png"></cover-image>
  19. <cover-view>全屏</cover-view>
  20. </cover-view>
  21. <cover-view class="handle-item" @click="leavingMessage">
  22. <cover-image class="download-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/leaving_message.png"></cover-image>
  23. <cover-view>留言</cover-view>
  24. </cover-view>
  25. <cover-view class="handle-item" @click="collectHandle">
  26. <cover-image
  27. class="download-img"
  28. :src="isCollection ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png'"
  29. ></cover-image>
  30. <cover-view>收藏</cover-view>
  31. </cover-view>
  32. <cover-view class="handle-item" v-if="fileLink" @click="downloadFile">
  33. <cover-image class="download-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/down_ico.png"></cover-image>
  34. <cover-view>下载</cover-view>
  35. </cover-view>
  36. </cover-view>
  37. <cover-view class="footer-free-charge free-charge" v-if="isShowFree">
  38. <cover-image class="img" @click="toggle" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/free_icon.png"></cover-image>
  39. <cover-image @click="removeBton" class="remove-icon" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/free_%20remove.png"></cover-image>
  40. </cover-view>
  41. </web-view>
  42. </block>
  43. <view class="noauth-cont" v-else-if="haveAuth === 2 || haveAuth === 3 || haveAuth === 4 || haveAuth === 5">
  44. <block v-if="!isShowAlert">
  45. <image src="https://hzstatic.hzinsights.com/cygx/czbk/noauth.png" class="noauth-ico"></image>
  46. <block v-if="haveAuth !== 3">
  47. <view v-if="reportInfo.IsResearch" class="research-noauth">
  48. 暂无 <text class="strong-text">买方研选</text> 权限
  49. <text style="margin-bottom: 30rpx"> 您可申请开通试用 </text>
  50. </view>
  51. <view class="tip" v-else>您暂无权限查看此报告内容,若想查看可以申请开通对应的试用权限</view>
  52. <view class="btn-cont" @click="applyAuth">{{ isShowAlert ? "立即上传" : "立即申请" }} </view>
  53. </block>
  54. <view class="tip" v-if="haveAuth === 3">
  55. <view v-if="reportInfo.IsResearch" class="research-noauth">
  56. 暂无 <text class="strong-text">买方研选</text> 权限
  57. <text> 点击提交申请,提醒对口销售为你开通试用 </text>
  58. </view>
  59. <block v-else>
  60. 您暂无权限查看此报告内容
  61. <view class="contract">
  62. 若想查看可以联系对口销售
  63. <text @click="callPhone(reportInfo.SellerMobile)">
  64. {{ reportInfo.SellerName }}:<text style="color: #d4bf86">{{ reportInfo.SellerMobile }}</text>
  65. </text>
  66. </view>
  67. <view>申请开通对应的试用权限</view>
  68. </block>
  69. </view>
  70. <view v-if="haveAuth === 3" class="btn-cont" @click="sellerApplyAuth"> {{ isShowText ? "提交申请" : "立即申请" }}</view>
  71. <view class="btn-cont back-btn" @click="backIndex"> 返回 </view>
  72. <view class="product-introduction-box" v-if="reportInfo.IsResearch">
  73. <!-- <view class="research-btn" @click="goRouterResearch('介绍')">
  74. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/report_Yx.png"></image>
  75. 点击查看买方研选产品介绍
  76. </view>
  77. <view class="research-btn" @click="goRouterResearch('报价')">
  78. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/quotation_icon.png"></image>
  79. 点击查看买方研选服务报价单
  80. </view> -->
  81. <view class="product-introduction">
  82. <view class="introduction-header">
  83. <view class="introduction-header-left"></view>
  84. <view class="introduction-header-right">
  85. <view class="introduction-title-CN"> 产品介绍 </view>
  86. <view class="introduction-title-US"> Product Introduction </view>
  87. </view>
  88. </view>
  89. <view class="introduction-body">
  90. <view class="introduction-body-box">
  91. <view class="body-box-title"> 独家亮点 </view>
  92. <view class="introduction-body-row"><span class="highHight-text">低至1000元</span>起访谈优质专家</view>
  93. <view class="introduction-body-row">重点公司小范围交流<span class="highHight-text">破圈</span>参加</view>
  94. <view class="introduction-body-row"><span class="highHight-text">海量</span>调研过程及纪要共享</view>
  95. </view>
  96. <view class="introduction-body-box">
  97. <view class="body-box-title"> 优质资源 </view>
  98. <view class="introduction-body-row"><span class="highHight-text">500+</span>篇/年调研纪要更新,</view>
  99. <view class="introduction-body-row"><span class="highHight-text">300+</span>场/年海内外重点公司小范围交流,</view>
  100. <view class="introduction-body-row"><span class="highHight-text">100+</span>场/年热点线下调研,</view>
  101. <view class="introduction-body-row"><span class="highHight-text">30000+</span>名优质行业专家长期合作,</view>
  102. <view class="introduction-body-row"><span class="highHight-text">1000+</span>名优秀买方汇集,</view>
  103. </view>
  104. <view class="introduction-body-box">
  105. <view class="body-box-title" style="margin-bottom: 18rpx"> 服务报价 </view>
  106. <view class="body-row-content">
  107. <view class="body-row-title"> 3万/年 </view>
  108. <view class="introduction-body-row">含无限量调研纪要查阅</view>
  109. <view class="introduction-body-row"><span class="highHight-text">以及3次</span>公开专家访谈;</view>
  110. </view>
  111. <view class="body-row-content">
  112. <view class="body-row-title"> 5万/年 </view>
  113. <view class="introduction-body-row">含无限量调研纪要查阅</view>
  114. <view class="introduction-body-row"> <span class="highHight-text">以及15次</span>公开专家访谈<span class="highHight-text">或30次</span>重点公司、专家小范围交流; </view>
  115. </view>
  116. <view class="body-row-content" style="margin-bottom: 0">
  117. <view class="body-row-title"> 10万/年 </view>
  118. <view class="introduction-body-row">含无限量调研纪要查阅</view>
  119. <view class="introduction-body-row">
  120. <span class="highHight-text">以及40次</span>公开专家访谈 <span class="highHight-text">或80次</span>重点公司、专家小范围交流
  121. <span class="highHight-text">或20次</span>私享专家一对一。
  122. </view>
  123. </view>
  124. </view>
  125. </view>
  126. </view>
  127. </view>
  128. </block>
  129. <block v-else>
  130. <text class="moneh-text"> 上传名片并填写简单信息,24小时内我们会为您开通一个月的免费月卡 </text>
  131. <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/month_card.png" class="month_card" alt="" />
  132. <view class="btn-cont btn-dl" @click="applyAuth"> 立即上传 </view>
  133. <view class="btn-cont month-back" @click="backIndex"> 返回</view>
  134. </block>
  135. </view>
  136. </view>
  137. <view v-else-if="Object.keys(reportInfo).length > 0" class="container no-binding">
  138. <view class="no-binding-content">
  139. <view class="title">{{ reportInfo.Title }}</view>
  140. <view class="tiem">{{ reportInfo.PublishDate }}</view>
  141. <view class="lable-content">
  142. <view
  143. class="item"
  144. v-for="(value, key) in lableListForm"
  145. :key="key"
  146. :style="{
  147. color: colors[key].color,
  148. backgroundColor: colors[key].background,
  149. borderColor: colors[key]['border-color'],
  150. }"
  151. >
  152. {{ value }}
  153. </view>
  154. </view>
  155. <view class="content">
  156. <view class="content-line"></view>
  157. <view class="content-abstract">
  158. <view class="abstract">
  159. <text class="content-text">摘要:</text>
  160. <mp-html :content="reportInfo.Abstract" />
  161. </view>
  162. <view class="describe">
  163. <text class="content-text">核心观点:</text>
  164. <mp-html :content="reportInfo.Annotation" />
  165. </view>
  166. </view>
  167. </view>
  168. </view>
  169. <view class="please-login" @click="pleaseGoLogin">请登录后查看更多内容</view>
  170. </view>
  171. <Loading />
  172. </block>
  173. </template>
  174. <script>
  175. import { Report, User, Reports, FreeButton } from "@/config/api.js";
  176. import freeCharge from "@/components/freeCharge";
  177. import { reportStrategyUrl } from "@/config/config";
  178. let app = getApp({ allowDefault: true });
  179. export default {
  180. data() {
  181. return {
  182. readTiem: 0,
  183. access_token: "", //用户标识
  184. reportInfo: "",
  185. id: "",
  186. linkurl: "",
  187. setIntervalTiem: null,
  188. fileLink: false,
  189. isCollection: false,
  190. isInterviewApply: false,
  191. isShowTip: false,
  192. showNav: false,
  193. haveAuth: false,
  194. isSendWx: "",
  195. lableListForm: {
  196. CategoryName: "",
  197. FieldName: "",
  198. Frequency: "月度",
  199. SubCategoryName: "渠道新声",
  200. },
  201. colors: {
  202. CategoryName: {
  203. color: "#0958d9",
  204. background: "#e6f4ff",
  205. "border-color": "#91caff",
  206. },
  207. FieldName: {
  208. color: "#cf1322",
  209. background: "#fff1f0",
  210. "border-color": "#ffa39e",
  211. },
  212. Frequency: {
  213. color: "#531dab",
  214. background: "#f9f0ff",
  215. "border-color": "#d3adf7",
  216. },
  217. SubCategoryName: {
  218. color: "#d4380d",
  219. background: "#fff2e8",
  220. "border-color": "#ffbb96",
  221. },
  222. },
  223. };
  224. },
  225. components: {
  226. freeCharge,
  227. },
  228. computed: {
  229. shareTitle() {
  230. let title = this.reportInfo.Abstract ? this.reportInfo.Title + "--" + this.reportInfo.Abstract : this.reportInfo.Title;
  231. return title;
  232. },
  233. strategyUrl() {
  234. return reportStrategyUrl;
  235. },
  236. isShowText() {
  237. return this.haveAuth === 3 && this.reportInfo.IsResearch;
  238. },
  239. },
  240. methods: {
  241. // 关注或者取消关注产业
  242. async isFollowHandler() {
  243. const res = await User.userIndustryFollow({
  244. SourceId: this.id,
  245. Source: "article",
  246. DoType: this.reportInfo.IsFollowButton ? "cancel" : "add",
  247. });
  248. if (res.Ret === 200) {
  249. this.reportInfo.IsFollowButton = !this.reportInfo.IsFollowButton;
  250. uni.showToast({
  251. title: res.Msg,
  252. duration: 2000,
  253. });
  254. }
  255. },
  256. /* 获取详情 */
  257. getDetail() {
  258. Report.reportDtl({
  259. ArticleId: this.id,
  260. PageRouter: this.$store.state.pageRouterReport,
  261. IsSendWx: this.isSendWx,
  262. }).then((res) => {
  263. if (res.Ret === 200) {
  264. uni.setNavigationBarTitle({
  265. title: res.Data.Detail.IsSummary == 1 ? "纪要详情" : "报告详情",
  266. });
  267. this.haveAuth = res.Data.HasPermission;
  268. this.isShowWriter = res.Data.IsShow;
  269. this.reportInfo = res.Data.Detail;
  270. if (!this.isUserBindingPhoneNumber) {
  271. this.lableListForm = {
  272. CategoryName: this.reportInfo.CategoryName,
  273. FieldName: this.reportInfo.FieldName,
  274. Frequency: this.reportInfo.Frequency,
  275. SubCategoryName: this.reportInfo.SubCategoryName,
  276. };
  277. }
  278. if (res.Data.HasPermission === 1) {
  279. //有访问权限
  280. this.isCollection = this.reportInfo.IsCollect;
  281. this.isInterviewApply = this.reportInfo.IsInterviewApply;
  282. this.linkurl = encodeURIComponent(res.Data.Detail.HttpUrl);
  283. this.fileLink = res.Data.Detail.FileLink;
  284. this.access_token = this.access_token || this.$db.get("access_token");
  285. this.$store.dispatch("statistics", { PageType: "ReportParticulars", DetailId: this.id + "" });
  286. }
  287. }
  288. });
  289. },
  290. /* 无权限申请开通权限 */
  291. applyAuth() {
  292. /* 区分是否是潜在用户 */
  293. this.haveAuth === 2
  294. ? User.applyTry({
  295. ApplyMethod: 3,
  296. TryType: "Article",
  297. DetailId: this.id,
  298. }).then((res) => {
  299. if (res.Ret === 200) {
  300. uni.navigateTo({
  301. url: "/pageMy/applyResult/applyResult",
  302. });
  303. }
  304. })
  305. : this.haveAuth === 4
  306. ? uni.navigateTo({
  307. url: "/pageMy/applyTrial/applyTrial?tryType=Article&detailId=" + this.id,
  308. })
  309. : uni.showModal({
  310. title: "",
  311. content: "您已经提交过申请了,请耐心等待",
  312. showCancel: false,
  313. confirmColor: "#365595",
  314. success: function (res) {},
  315. });
  316. },
  317. //销售的立即申请
  318. sellerApplyAuth() {
  319. User.applyTry({
  320. TryType: "Article",
  321. DetailId: this.id,
  322. }).then((res) => {
  323. if (res.Ret === 200) {
  324. uni.showModal({
  325. title: "",
  326. content: "提交申请成功,请耐心等待",
  327. showCancel: false,
  328. confirmColor: "#365595",
  329. success: function (res) {
  330. this.backIndex();
  331. },
  332. });
  333. }
  334. });
  335. },
  336. // 返回首頁
  337. backIndex() {
  338. uni.navigateBack({
  339. fail() {
  340. uni.switchTab({
  341. url: "/pages/index/index",
  342. });
  343. },
  344. });
  345. },
  346. callPhone(num) {
  347. uni.makePhoneCall({
  348. phoneNumber: num,
  349. });
  350. },
  351. /* 申请访谈 */
  352. applyHandle() {
  353. // 申请访谈
  354. !this.isInterviewApply &&
  355. this.$util.modal("", "专家访谈申请会提交给您的对口销售,销售会线下与您取得联系,确定申请吗?", () => {
  356. this.interviewApi();
  357. });
  358. // 取消申请访谈 区分状态 '待邀请','待访谈','已完成','已取消'
  359. if (this.isInterviewApply) {
  360. this.$util.modal(
  361. "",
  362. this.reportInfo.InterviewApplyStatus == "待访谈"
  363. ? "当前无法取消访谈,若有疑问,请联系对口销售"
  364. : this.reportInfo.InterviewApplyStatus == "待邀请"
  365. ? "您要取消此次访谈申请吗?"
  366. : "该访谈已完成",
  367. () => {
  368. this.reportInfo.InterviewApplyStatus == "待邀请"
  369. ? this.interviewApi()
  370. : this.reportInfo.InterviewApplyStatus == "待访谈"
  371. ? uni.makePhoneCall({
  372. phoneNumber: "18767183922",
  373. })
  374. : "";
  375. }
  376. );
  377. }
  378. },
  379. /* 访谈接口 */
  380. interviewApi() {
  381. Report.applyRpt({
  382. ArticleId: this.id,
  383. }).then((res) => {
  384. this.isInterviewApply = !this.isInterviewApply;
  385. });
  386. },
  387. /* 收藏 */
  388. collectHandle() {
  389. Report.collectRpt({
  390. ArticleId: this.id,
  391. PageRouter: this.$store.state.pageRouterReport,
  392. }).then((res) => {
  393. this.isCollection = !this.isCollection;
  394. this.$util.toast(res.Msg);
  395. });
  396. },
  397. /* 错误 */
  398. errorDetails() {
  399. uni.showModal({
  400. confirmText: "知道了",
  401. showCancel: false,
  402. confirmColor: "#376cbb",
  403. content: "网络不好,请刷新重试",
  404. success: (res) => {
  405. uni.navigateBack({
  406. fail() {
  407. uni.switchTab({
  408. url: "/pages/index/index",
  409. });
  410. },
  411. });
  412. },
  413. });
  414. },
  415. async downloadFile() {
  416. const res = await Report.articlePdfwatermark({
  417. ArticleId: this.id,
  418. });
  419. if (res.Ret === 200) {
  420. uni.navigateTo({
  421. url: "/pageMy/downloadFile/downloadFile?url=" + res.Data.FileLink,
  422. });
  423. }
  424. },
  425. btnSearch() {
  426. uni.navigateTo({ url: "/pages-search/indedxSearch/indedxSearch?source=报告详情页面" });
  427. },
  428. //跳转到免费送月卡页面
  429. toggle() {
  430. uni.navigateTo({
  431. url: "/pageMy/freeTrial/freeTrial",
  432. });
  433. },
  434. //隐藏当天的按钮
  435. async removeBton() {
  436. const res = await FreeButton.userFreeButtonUpdate();
  437. },
  438. leavingMessage() {
  439. uni.navigateTo({
  440. url: "/activityPages/generationAsk/generationAsk?id=" + this.id + "&type=文章",
  441. });
  442. },
  443. // 去往横屏页面
  444. goRevolvePage() {
  445. let token = this.reportInfo.HttpUrl;
  446. uni.navigateTo({
  447. url: "/pageMy/reportRevolve/reportRevolve",
  448. events: {
  449. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  450. acceptDataFromOpenedPage: function (data) {
  451. console.log(data);
  452. },
  453. },
  454. success: function (res) {
  455. // 通过eventChannel向被打开页面传送数据
  456. res.eventChannel.emit("acceptDataFromOpenerPage", { url: JSON.stringify(token) });
  457. },
  458. });
  459. },
  460. },
  461. async onShow() {
  462. this.readTiem = 0;
  463. this.setIntervalTiem = setInterval(() => {
  464. this.readTiem++;
  465. }, 1000);
  466. let page = getCurrentPages(); //查看路径
  467. if (page.length === 1) {
  468. this.getDetail();
  469. } else {
  470. // 跳转入口
  471. this.id > 0 && this.getDetail();
  472. }
  473. },
  474. onLoad(option) {
  475. this.id = option.id ? +option.id : "";
  476. this.isSendWx = option.IsSendWx || "";
  477. if (!this.id && !this.id > 0) {
  478. this.errorDetails();
  479. }
  480. },
  481. /**
  482. * 用户点击分享
  483. */
  484. onShareAppMessage: function (res) {
  485. if (this.id) {
  486. return {
  487. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : this.shareTitle,
  488. path: "/pageMy/reportDetail/reportDetail?id=" + this.id,
  489. success: (res) => {},
  490. fail: (err) => {},
  491. };
  492. }
  493. },
  494. onHide() {
  495. //页面退出
  496. if (this.id && this.id > 0) {
  497. clearInterval(this.setIntervalTiem);
  498. Reports.addStopTime({
  499. ArticleId: this.id,
  500. StopTime: this.readTiem,
  501. OutType: 2,
  502. Source: "MOBILE",
  503. }).then((res) => {});
  504. }
  505. },
  506. onUnload() {
  507. if (this.id && this.id > 0) {
  508. //页面返回
  509. clearInterval(this.setIntervalTiem);
  510. Reports.addStopTime({
  511. ArticleId: this.id,
  512. StopTime: this.readTiem,
  513. OutType: 1,
  514. Source: "MOBILE",
  515. }).then((res) => {});
  516. }
  517. },
  518. };
  519. </script>
  520. <style lang="scss" scoped>
  521. .reportDetail-container {
  522. background-color: #fff;
  523. padding-bottom: 200rpx;
  524. padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
  525. padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
  526. .search-view {
  527. position: fixed;
  528. width: 100%;
  529. height: 60rpx;
  530. background: #fff;
  531. z-index: 99999;
  532. font-size: 24rpx;
  533. box-sizing: border-box;
  534. .search-view-box {
  535. display: flex;
  536. align-items: center;
  537. justify-content: center;
  538. background: #376cbb;
  539. color: #fff;
  540. height: 60rpx;
  541. z-index: 99999;
  542. }
  543. .search-icon {
  544. width: 147rpx;
  545. height: 40rpx;
  546. margin: 0 15rpx;
  547. z-index: 99999;
  548. }
  549. }
  550. .footer-con {
  551. position: fixed;
  552. z-index: 99999;
  553. bottom: 0;
  554. padding-bottom: constant(safe-area-inset-bottom);
  555. padding-bottom: env(safe-area-inset-bottom);
  556. left: 0;
  557. width: 100%;
  558. background-color: #ffffff;
  559. display: flex;
  560. justify-content: space-around;
  561. height: 100rpx;
  562. border-top: 1px solid #dddddd;
  563. .handle-item {
  564. align-items: center;
  565. display: flex;
  566. flex-direction: column;
  567. justify-content: center;
  568. position: relative;
  569. z-index: 99999;
  570. .download-img {
  571. width: 44rpx;
  572. height: 44rpx;
  573. margin-bottom: 4rpx;
  574. }
  575. }
  576. }
  577. .footer-free-charge {
  578. .img {
  579. width: 156rpx;
  580. height: 156rpx;
  581. }
  582. .remove-icon {
  583. width: 31rpx;
  584. height: 31rpx;
  585. position: absolute;
  586. right: 0;
  587. top: 0;
  588. }
  589. }
  590. .noauth-cont {
  591. padding-top: 170rpx;
  592. text-align: center;
  593. font-size: 28rpx;
  594. .noauth-ico {
  595. width: 365rpx;
  596. height: 229rpx;
  597. margin-bottom: 70rpx;
  598. }
  599. .tip {
  600. width: 532rpx;
  601. margin: 0 auto 100rpx;
  602. .contract {
  603. padding: 40rpx 90rpx 0;
  604. line-height: 44rpx;
  605. text {
  606. display: inline-block;
  607. }
  608. }
  609. }
  610. .btn-cont {
  611. width: 368rpx;
  612. height: 80rpx;
  613. // position: relative;
  614. background: linear-gradient(268deg, #2ddbff 0%, #1599ff 49%, #005eff 100%);
  615. color: #fff;
  616. font-size: 34rpx;
  617. margin: 0 auto;
  618. text-align: center;
  619. line-height: 80rpx;
  620. &.back-btn {
  621. background: #fff !important;
  622. color: #2c83ff;
  623. border: 1px solid #2c83ff;
  624. margin-top: 30rpx;
  625. }
  626. .btn_bg {
  627. width: 100%;
  628. height: 80rpx;
  629. position: absolute;
  630. left: 0;
  631. top: 0;
  632. }
  633. .btn-txt {
  634. width: 100%;
  635. position: absolute;
  636. z-index: 1;
  637. }
  638. }
  639. .product-introduction-box {
  640. background-color: $uni-bg-color;
  641. padding-top: 10rpx;
  642. margin-top: 60rpx;
  643. .product-introduction {
  644. padding: 60rpx 60rpx 0;
  645. background-color: white;
  646. .introduction-header {
  647. margin-bottom: 40rpx;
  648. display: flex;
  649. .introduction-header-left {
  650. background-color: #caaf8b;
  651. height: 90rpx;
  652. width: 14rpx;
  653. margin-right: 20rpx;
  654. }
  655. .introduction-header-right {
  656. text-align: left;
  657. .introduction-title-CN {
  658. font-weight: 500;
  659. font-size: 34rpx;
  660. color: #333333;
  661. line-height: 42rpx;
  662. margin-bottom: 8rpx;
  663. }
  664. .introduction-title-US {
  665. font-weight: 400;
  666. font-size: 28rpx;
  667. color: #c0c4cc;
  668. line-height: 42rpx;
  669. }
  670. }
  671. }
  672. .introduction-body {
  673. .introduction-body-box {
  674. text-align: left;
  675. margin-bottom: 40rpx;
  676. .body-row-content {
  677. margin-bottom: 40rpx;
  678. font-size: 34rpx;
  679. line-height: 48rpx;
  680. font-weight: 600;
  681. color: #caaf8b;
  682. .body-row-title {
  683. margin-left: 40rpx;
  684. }
  685. }
  686. .body-box-title {
  687. font-weight: 600;
  688. font-size: 34rpx;
  689. line-height: 48rpx;
  690. padding-left: 40rpx;
  691. position: relative;
  692. margin-bottom: 22rpx;
  693. &::before {
  694. content: "";
  695. height: 20rpx;
  696. width: 20rpx;
  697. background-color: #caaf8b;
  698. border-radius: 20rpx;
  699. position: absolute;
  700. left: 0;
  701. top: 16rpx;
  702. }
  703. }
  704. .introduction-body-row {
  705. margin-left: 40rpx;
  706. font-weight: 400;
  707. font-size: 26rpx;
  708. color: #333333;
  709. line-height: 36rpx;
  710. }
  711. .highHight-text {
  712. color: #caaf8b;
  713. }
  714. }
  715. }
  716. }
  717. }
  718. }
  719. .month_card {
  720. width: 100%;
  721. height: 565rpx;
  722. padding-left: -20rpx;
  723. }
  724. .btn-dl {
  725. background: linear-gradient(253deg, #fcf3e9 0%, #eedec8 100%) !important;
  726. color: #333 !important;
  727. margin: 30rpx auto !important;
  728. }
  729. .month-back {
  730. background: #f6f6f6 !important;
  731. color: #999 !important;
  732. }
  733. .moneh-text {
  734. text-align: center;
  735. width: 632rpx;
  736. margin: 0 auto 20rpx;
  737. color: #999999;
  738. }
  739. .research-noauth {
  740. color: #333;
  741. font-size: 36rpx;
  742. width: calc(100% + 80rpx);
  743. margin-left: -40rpx;
  744. .strong-text {
  745. display: inline-block;
  746. padding: 0 10rpx;
  747. font-weight: 500;
  748. }
  749. text:last-child {
  750. font-size: 32rpx;
  751. font-size: 34rpx;
  752. color: #999999;
  753. margin-top: 10rpx;
  754. }
  755. }
  756. // .research-btn {
  757. // display: flex;
  758. // align-items: center;
  759. // font-size: 32rpx;
  760. // width: 546rpx;
  761. // height: 78rpx;
  762. // margin: 30rpx auto;
  763. // background: #f8f8fa;
  764. // border-radius: 4rpx;
  765. // padding-left: 40rpx;
  766. // image {
  767. // width: 40rpx;
  768. // height: 40rpx;
  769. // margin-right: 10rpx;
  770. // }
  771. // }
  772. }
  773. .no-binding {
  774. padding: 30rpx;
  775. background-color: #f0f1f5;
  776. .lable-content {
  777. display: flex;
  778. flex-wrap: wrap;
  779. .item {
  780. font-size: 24rpx;
  781. height: 34rpx;
  782. padding: 0 16rpx;
  783. display: flex;
  784. align-items: center;
  785. border: 1rpx solid #ccc;
  786. border-radius: 2rpx;
  787. margin-right: 20rpx;
  788. margin-bottom: 20rpx;
  789. }
  790. }
  791. .no-binding-content {
  792. width: 100%;
  793. background-color: #fff;
  794. padding: 40rpx 20rpx;
  795. .title {
  796. font-size: 34rpx;
  797. font-weight: 500;
  798. line-height: 48rpx;
  799. color: #333;
  800. }
  801. .tiem {
  802. font-size: 24rpx;
  803. color: #999999;
  804. margin: 20rpx 0;
  805. }
  806. .content {
  807. display: flex;
  808. .content-line {
  809. width: 4rpx;
  810. background-color: #333;
  811. margin-right: 20rpx;
  812. }
  813. .content-text {
  814. font-size: 34rpx;
  815. font-weight: 500;
  816. color: #333;
  817. }
  818. .describe {
  819. margin-top: 20rpx;
  820. }
  821. }
  822. }
  823. .please-login {
  824. margin: 50rpx auto 150rpx;
  825. width: 556rpx;
  826. height: 64rpx;
  827. color: #fff;
  828. font-size: 24rpx;
  829. font-weight: 600;
  830. background-color: #376cbb;
  831. display: flex;
  832. align-items: center;
  833. justify-content: center;
  834. border-radius: 9rpx;
  835. }
  836. }
  837. </style>