home.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389
  1. <template>
  2. <view class="index tn-safe-area-inset-bottom">
  3. <view class="">
  4. <uv-sticky bgColor="#ffffff">
  5. <uni-search-bar radius="15" placeholder="搜索" @confirm="search" v-model="searchValue" @blur="search"
  6. @cancel="cancel" @clear="clear" cancelButton="auto" clearButton="auto"
  7. style="border-bottom: 1rpx solid #f1f1f1cc;">
  8. </uni-search-bar></uv-sticky>
  9. <!-- 图文信息 -->
  10. <block v-for="(item,index) in content" :key="item.id" >
  11. <view class="blogger__item">
  12. <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
  13. <view class="justify__author__info" @click="tn('')">
  14. <view class="tn-flex tn-flex-row-center">
  15. <view class="tn-flex tn-flex-row-center tn-flex-col-center">
  16. <!-- <view class="">
  17. <tn-avatar class="" shape="circle" :src="item.userAvatar" size="lg">
  18. </tn-avatar>
  19. </view> -->
  20. <view class="tn-padding-right tn-text-ellipsis">
  21. <view class="tn-padding-right tn-color-grey tn-text-lg">
  22. {{ item.company }}
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. <view v-if="item.validDate"
  29. class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
  30. <text class="" style="background: #3F51B542;font-size: 12px;
  31. padding: 8px;
  32. color: #0000FF;
  33. border-radius: 24px;
  34. border-top-right-radius: 0;" @click="showValid(item.validDate)">{{item.validDate}}</text>
  35. </view>
  36. </view>
  37. <view
  38. class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left"
  39. @click="tn('')">
  40. <!-- <view v-for="(label_item,label_index) in item.label" :key="label_index"
  41. class="blogger__desc__label tn-float-left tn-margin-right">
  42. <text class="blogger__desc__label--prefix tn-icon-topics-fill"></text>
  43. <text class="tn-text-df">{{ label_item }}</text>
  44. </view> -->
  45. <!-- 不用限制长度了,因为发布的时候限制长度了-->
  46. <text
  47. class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.content }}</text>
  48. </view>
  49. <block v-if="item.imgList">
  50. <view v-if="[1,2,4].indexOf(item.imgList.length) != -1" class="tn-padding-top-xs"
  51. @click="tn('')">
  52. <image v-for="(image_item,image_index) in item.imgList" :key="image_index"
  53. class="blogger__main-image" :class="{
  54. 'blogger__main-image--1 tn-margin-bottom-sm': item.imgList.length === 1,
  55. 'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.imgList.length === 2 || item.imgList.length === 4
  56. }" :src="image_item.ftpUrl" mode="aspectFill" @click="showImg(item.imgList,image_index)"></image>
  57. </view>
  58. <view v-else class="tn-padding-top-xs">
  59. <tn-grid hoverClass="none" :col="3">
  60. <block v-for="(image_item,image_index) in item.imgList" :key="image_index">
  61. <!-- #ifndef MP-WEIXIN -->
  62. <tn-grid-item style="width: 30%;margin: 10rpx;">
  63. <image class="blogger__main-image blogger__main-image--3"
  64. :src="image_item.ftpUrl" mode="aspectFill"
  65. @click="showImg(item.imgList,image_index)"></image>
  66. </tn-grid-item>
  67. <!-- #endif-->
  68. <!-- #ifdef MP-WEIXIN -->
  69. <tn-grid-item style="width: 30%;margin: 10rpx;">
  70. <image class="blogger__main-image blogger__main-image--3"
  71. :src="image_item.ftpUrl" mode="aspectFill"
  72. @click="showImg(item.imgList,image_index)"></image>
  73. </tn-grid-item>
  74. <!-- #endif-->
  75. </block>
  76. </tn-grid>
  77. </view>
  78. </block>
  79. <view v-for="file in item.fileDetailList" style="margin-bottom: 4px;" :key="file.id" v-if="!isImage(file.fileName)">
  80. <view>
  81. <text class="tn-icon-link"></text>
  82. <view style="display: inline-block;margin-left:8px" @click="clickLink(file.ftpUrl,file.fileName)">
  83. {{file.fileName}}</view>
  84. </view>
  85. </view>
  86. <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
  87. <view class="justify-content-item tn-color-gray tn-text-center">
  88. <view class="tn-padding-right tn-padding-top-xs tn-color-gray">
  89. {{ item.createTime|formatDate }}
  90. </view>
  91. </view>
  92. <view class="justify-content-item tn-flex tn-flex-col-center">
  93. <text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"
  94. @click="showActionSheet(item)"></text>
  95. </view>
  96. </view>
  97. </view>
  98. <!-- 边距间隔 -->
  99. <view class="tn-strip-bottom" v-if="index != content.length - 1"></view>
  100. </block>
  101. <view v-if="showEmpty&&content.length==0" style="margin-top: 32vh;">
  102. <tn-empty mode="list"></tn-empty>
  103. </view>
  104. <!-- 结尾 -->
  105. <view v-if="content.length==totalSize&&totalSize!=0" style="background-color: #f1f1f1cc;padding: 16px 0;">
  106. <tn-load-more status="nomore" :loadText="loadText"></tn-load-more>
  107. </view>
  108. </view>
  109. <view class='tn-tabbar-height' :style="{marginTop: vuex_custom_bar_height + 'px'}"></view>
  110. <tn-popup v-model="showSheet" mode="center" closeBtn="true" borderRadius="16">
  111. <view class="content" style="padding: 24px 36px;font-size: 16px;line-height: 24px; width: 320px;"
  112. v-if="!showContact">
  113. <button @click="linkTel()" style="border-radius:30px;color:#fff;background-color: #1d60b1;"><text
  114. class="tn-icon-service" style="margin-right: 12px;"></text> 联系需方</button>
  115. <!-- <view>联系我们帮助对接</view> -->
  116. <button v-if="!collStatus" @click="addColl"
  117. style="margin-top:10px;border-radius:30px;" type="default" plain="true"><text
  118. class="tn-icon-star" style="margin-right: 12px;"></text>
  119. 收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;藏</button>
  120. <button v-if="collStatus" @click="delColl"
  121. style="margin-top:10px;border-radius:30px;" type="default" plain="true"><text
  122. class="tn-icon-star-fill" style="margin-right: 12px;"></text> 取消收藏</button>
  123. <button open-type="share"
  124. style="margin-top:10px;border-radius:30px;" type="default" plain="true" :data-coupon="curItem"><text
  125. class="tn-icon-send" style="margin-right: 12px;"></text>
  126. 转&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发</button>
  127. </view>
  128. <view class="content bg-content" style="padding: 50px 36px;padding-bottom: 32px;font-size: 16px;width:320px;line-height: 24px;"
  129. v-if="showContact">
  130. <view><text style="font-size: 20px;font-weight: bold;" v-if="curContact.company">{{curContact.company}}</text></view>
  131. <view style="margin-top:20px;
  132. font-weight: bold;
  133. font-size: 20px;"><text class="tn-icon-my-formal"></text><text style="margin-left: 6px;">{{curContact.contactPerson}}</text> </view>
  134. <view style="margin-top:20px;font-size: 20px;font-weight: bold;" @click="showTel(curContact.contactMethod)"><text class="tn-icon-tel"></text>
  135. <text style="margin-left: 4px;">{{curContact.contactMethod}}</text> </view>
  136. </view>
  137. </tn-popup>
  138. <tn-toast ref="toast"></tn-toast>
  139. </view>
  140. </template>
  141. <script>
  142. import request from '../../utils/request'
  143. export default {
  144. name: 'Index',
  145. data() {
  146. return {
  147. loading: false,
  148. loadText: {
  149. loadmore: '下拉加载',
  150. loading: '快速加载中...',
  151. nomore: '恭喜你,已阅读完所有需求信息哦!'
  152. },
  153. showContact: false,
  154. curContact: {},
  155. totalSize: 0,
  156. curIndex: 1,
  157. showSheet: false,
  158. curItem: {},
  159. userNo: '',
  160. searchValue: '',
  161. collStatus: '',
  162. cardCur: 0,
  163. collId: '',
  164. isAndroid: true,
  165. content: [],
  166. showEmpty:false,
  167. }
  168. },
  169. filters: {
  170. formatDate(value) {
  171. if (!value) return '';
  172. const date = new Date(value);
  173. const today = new Date();
  174. const yesterday = new Date(today); // 昨天的日期
  175. yesterday.setDate(yesterday.getDate() - 1); // 将昨天的日期设置为前一天
  176. if (date.getFullYear() == today.getFullYear() && date.getMonth() == today.getMonth() && date.getDate() ==
  177. today.getDate()) {
  178. return '今天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
  179. .getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
  180. }
  181. if (date.getFullYear() == yesterday.getFullYear() && date.getMonth() == yesterday.getMonth() && date
  182. .getDate() == yesterday.getDate()) {
  183. return '昨天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
  184. .getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
  185. }
  186. return date.toLocaleDateString() + ' ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
  187. .getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
  188. },
  189. },
  190. created() {
  191. const systemInfo = uni.getSystemInfoSync()
  192. if (systemInfo.system.toLocaleLowerCase().includes('ios')) {
  193. this.isAndroid = false
  194. } else {
  195. this.isAndroid = true
  196. }
  197. this.fetchData();
  198. },
  199. onReachBottom() {
  200. console.warn(12345);
  201. },
  202. methods: {
  203. // cardSwiper
  204. cardSwiper(e) {
  205. this.cardCur = e.detail.current
  206. },
  207. clickLink(url,fileName) {
  208. uni.navigateTo({
  209. url:'/pages/webview/web-view?url='+encodeURIComponent('https://slb-m.lx-device.com/webview?title='+fileName+'&url='+ url),
  210. })
  211. // uni.navigateTo({
  212. // url: '/pages/webview/web-view?url=' + url,
  213. // })
  214. },
  215. isImage(fileName) {
  216. const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico']
  217. const extension = fileName.split('.').pop().toLowerCase();
  218. return imageExtensions.includes(extension);
  219. },
  220. reFetchData() {
  221. this.loading = true;
  222. uni.showToast({
  223. title: '正在刷新...',
  224. icon: 'none'
  225. });
  226. this.fetchData();
  227. },
  228. fetchData(curIndex = 1) {
  229. let that = this;
  230. that.showEmpty = false;
  231. this.curIndex = curIndex;
  232. request.post('/slbResourceDemand/query', {
  233. index: curIndex,
  234. limit: 10,
  235. content: that.searchValue,
  236. }).then(res => {
  237. that.loading = false;
  238. if (res&&res.success) {
  239. that.totalSize = res.total || 0;
  240. let newList = res.list || [];
  241. for (let i = 0; i < newList.length; i++) {
  242. newList[i].imgList = [];
  243. for (let j = 0; j < newList[i].fileDetailList.length; j++) {
  244. if (that.isImage(newList[i].fileDetailList[j].fileName)) {
  245. newList[i].imgList.push(newList[i].fileDetailList[j]);
  246. }
  247. }
  248. }
  249. if (curIndex == 1) {
  250. that.content = newList || [];
  251. } else {
  252. that.content = that.content.concat(newList || []);
  253. }
  254. }
  255. that.showEmpty = true;
  256. console.warn(res);
  257. })
  258. },
  259. // 跳转
  260. tn(e) {
  261. uni.navigateTo({
  262. url: e,
  263. });
  264. },
  265. hideSheet(){
  266. this.showSheet = false;
  267. },
  268. showActionSheet(item) {
  269. let that = this;
  270. console.warn(item);
  271. this.curItem = item;
  272. this.curItem.isNeed = 1;
  273. this.collStatus = false;
  274. this.showSheet = true;
  275. that.showContact = false;
  276. if (uni.getStorageSync('userNo')) {
  277. let params = {};
  278. params = {
  279. fkBisNo: that.curItem.bisNo,
  280. userNo: uni.getStorageSync('userNo'),
  281. };
  282. request.post('/slbCollect/query', params).then(res => {
  283. if (res.success) {
  284. if (res.list && res.list.length > 0) {
  285. that.collStatus = true;
  286. that.collId = res.list[0].id;
  287. }
  288. }
  289. })
  290. }
  291. },
  292. linkTel() {
  293. if (!uni.getStorageSync('userNo')) {
  294. uni.showToast({
  295. title: '请登录'
  296. })
  297. uni.navigateTo({
  298. url: '/pages/login/login'
  299. })
  300. return false;
  301. }
  302. let that = this;
  303. let params = {};
  304. params.slbBisContact = JSON.stringify({
  305. fkBisNo: that.curItem.bisNo,
  306. bisType: '1',
  307. type: '1',
  308. company: that.curItem.company,
  309. companyNo: that.curItem.companyNo,
  310. userNo: uni.getStorageSync('userNo'),
  311. });
  312. request.post('/slbBisContact/add', params).then(res => {
  313. if (res.success) {
  314. that.showContact = true;
  315. that.curContact.company = that.curItem.company;
  316. that.curContact.contactMethod = res.resultMap.contactMethod;
  317. that.curContact.contactPerson = res.resultMap.contactPerson;
  318. } else {
  319. that.showContact = false;
  320. uni.showToast({
  321. title: res.msg,
  322. icon: 'none'
  323. })
  324. }
  325. })
  326. },
  327. addColl() {
  328. if (!uni.getStorageSync('userNo')) {
  329. uni.showToast({
  330. title: '请登录'
  331. })
  332. uni.navigateTo({
  333. url: '/pages/login/login'
  334. })
  335. return false;
  336. }
  337. let that = this;
  338. let params = {};
  339. params.slbCollect = JSON.stringify({
  340. fkBisNo: that.curItem.bisNo,
  341. bisType: '1',
  342. userNo: uni.getStorageSync('userNo'),
  343. });
  344. request.post('/slbCollect/add', params).then(res => {
  345. if (res.success) {
  346. that.$refs.toast.show({
  347. title: '信息已收藏,请在我的收藏里查看阅读',
  348. image: '',
  349. duration: 2000
  350. })
  351. that.showSheet = false;
  352. } else {
  353. uni.showToast({
  354. title: res.msg
  355. })
  356. }
  357. })
  358. },
  359. delColl() {
  360. let that = this;
  361. request.post('/slbCollect/del', {
  362. id: that.collId
  363. }).then(res => {
  364. if (res.success) {
  365. that.$refs.toast.show({
  366. title: '此需求信息将不会保存在我的收藏里',
  367. image: '',
  368. duration: 2000
  369. })
  370. that.showSheet = false;
  371. } else {
  372. uni.showToast({
  373. title: res.msg
  374. })
  375. }
  376. })
  377. },
  378. showImg(items, index) {
  379. let urls = [];
  380. for (let i = 0; i < items.length; i++) {
  381. urls.push(items[i].ftpUrl);
  382. }
  383. // 预览图片
  384. uni.previewImage({
  385. urls: urls,
  386. current: index,
  387. });
  388. },
  389. showValid(text){
  390. uni.showToast({
  391. title: '有效期:'+text,
  392. icon: 'none'
  393. })
  394. },
  395. addButton() {
  396. if (!uni.getStorageSync('userNo')) {
  397. uni.showToast({
  398. title: '请登录',
  399. icon:'none'
  400. })
  401. uni.navigateTo({
  402. url: '/pages/login/login'
  403. })
  404. return false;
  405. } else {
  406. uni.navigateTo({
  407. url: '/circlePages/circle'
  408. })
  409. }
  410. //未登录,去登录
  411. //已登录,去新增第一步
  412. },
  413. loadMore() {
  414. if (this.totalSize > this.content.length) {
  415. this.fetchData(this.curIndex + 1);
  416. }
  417. console.error('正在加载更多');
  418. },
  419. search() {
  420. this.fetchData();
  421. },
  422. cancel() {
  423. this.searchValue = '';
  424. this.fetchData();
  425. },
  426. clear() {
  427. this.searchValue = '';
  428. this.fetchData();
  429. },
  430. showTel(tel){
  431. uni.makePhoneCall({
  432. phoneNumber: tel,
  433. });
  434. },
  435. showDetail(item){
  436. uni.navigateTo({
  437. url: '/pages/index/detail/detail?id='+item.bisNo+'&isNeed=1'
  438. })
  439. }
  440. }
  441. }
  442. </script>
  443. <style lang="scss" scoped>
  444. .index {
  445. max-height: 100vh;
  446. }
  447. /* 底部安全边距 start*/
  448. .tn-tabbar-height {
  449. min-height: 120rpx;
  450. height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  451. height: calc(140rpx + constant(safe-area-inset-bottom));
  452. }
  453. /* 轮播视觉差 start */
  454. .card-swiper {
  455. height: 330rpx !important;
  456. }
  457. .card-swiper swiper-item {
  458. width: 750rpx !important;
  459. left: 0rpx;
  460. box-sizing: border-box;
  461. padding: 40rpx 30rpx 30rpx 30rpx;
  462. overflow: initial;
  463. }
  464. .card-swiper swiper-item .swiper-item {
  465. width: 100%;
  466. display: block;
  467. height: 100%;
  468. border-radius: 15rpx;
  469. transform: scale(1);
  470. transition: all 0.2s ease-in 0s;
  471. // overflow: hidden;
  472. }
  473. .card-swiper swiper-item.cur .swiper-item {
  474. transform: none;
  475. transition: all 0.2s ease-in 0s;
  476. }
  477. .card-swiper swiper-item .swiper-item-text {
  478. margin-top: -160rpx;
  479. text-align: center;
  480. width: 100%;
  481. display: block;
  482. height: 50%;
  483. border-radius: 10rpx;
  484. transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
  485. transition: all 0.6s ease 0s;
  486. overflow: hidden;
  487. }
  488. .card-swiper swiper-item.cur .swiper-item-text {
  489. margin-top: -220rpx;
  490. width: 100%;
  491. transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
  492. transition: all 0.6s ease 0s;
  493. }
  494. .image-banner {
  495. border: 1rpx solid #F8F7F8;
  496. display: flex;
  497. align-items: center;
  498. justify-content: center;
  499. }
  500. .image-banner image {
  501. width: 100%;
  502. height: 100%;
  503. }
  504. /* 轮播指示点 start*/
  505. .indication {
  506. z-index: 9999;
  507. width: 100%;
  508. height: 36rpx;
  509. position: absolute;
  510. display: flex;
  511. flex-direction: row;
  512. align-items: center;
  513. justify-content: center;
  514. }
  515. .spot {
  516. background-color: #FFFFFF;
  517. opacity: 0.6;
  518. width: 10rpx;
  519. height: 10rpx;
  520. border-radius: 20rpx;
  521. top: -70rpx;
  522. margin: 0 8rpx !important;
  523. position: relative;
  524. }
  525. .spot.active {
  526. opacity: 1;
  527. width: 30rpx;
  528. background-color: #FFFFFF;
  529. }
  530. /* 图标容器12 start */
  531. .tn-three {
  532. position: absolute;
  533. top: 50%;
  534. right: 50%;
  535. bottom: 50%;
  536. left: 50%;
  537. transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
  538. text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
  539. }
  540. .icon12 {
  541. &__item {
  542. width: 30%;
  543. background-color: #FFFFFF;
  544. border-radius: 10rpx;
  545. padding: 30rpx;
  546. margin: 20rpx 10rpx;
  547. transform: scale(1);
  548. transition: transform 0.3s linear;
  549. transform-origin: center center;
  550. &--icon {
  551. width: 100rpx;
  552. height: 100rpx;
  553. font-size: 60rpx;
  554. border-radius: 50%;
  555. margin-bottom: 18rpx;
  556. position: relative;
  557. z-index: 1;
  558. &::after {
  559. content: " ";
  560. position: absolute;
  561. z-index: -1;
  562. width: 100%;
  563. height: 100%;
  564. left: 0;
  565. bottom: 0;
  566. border-radius: inherit;
  567. opacity: 1;
  568. transform: scale(1, 1);
  569. background-size: 100% 100%;
  570. background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
  571. }
  572. }
  573. }
  574. }
  575. /* 自定义导航栏内容 start */
  576. .custom-nav {
  577. height: 100%;
  578. &__back {
  579. margin: auto 5rpx;
  580. font-size: 40rpx;
  581. margin-right: 10rpx;
  582. margin-left: 30rpx;
  583. flex-basis: 5%;
  584. }
  585. &__search {
  586. flex-basis: 70%;
  587. width: 100%;
  588. height: 100%;
  589. &__box {
  590. width: 100%;
  591. height: 70%;
  592. padding: 10rpx 0;
  593. margin: 0 30rpx;
  594. border-radius: 60rpx 60rpx 0 60rpx;
  595. font-size: 24rpx;
  596. }
  597. &__icon {
  598. padding-right: 10rpx;
  599. margin-left: 20rpx;
  600. font-size: 30rpx;
  601. }
  602. &__text {
  603. // color: #AAAAAA;
  604. }
  605. }
  606. }
  607. .logo-image {
  608. width: 65rpx;
  609. height: 65rpx;
  610. position: relative;
  611. border: 1rpx solid #F8F7F8;
  612. border-radius: 50%;
  613. }
  614. .logo-pic {
  615. background-size: cover;
  616. background-repeat: no-repeat;
  617. // background-attachment:fixed;
  618. background-position: top;
  619. border-radius: 50%;
  620. }
  621. /* 自定义导航栏内容 end */
  622. /* 热门图片 start*/
  623. .image-tuniao1 {
  624. padding: 165rpx 0rpx;
  625. font-size: 40rpx;
  626. font-weight: 300;
  627. position: relative;
  628. }
  629. .image-tuniao2 {
  630. padding: 75rpx 0rpx;
  631. font-size: 40rpx;
  632. font-weight: 300;
  633. position: relative;
  634. }
  635. .image-tuniao3 {
  636. padding: 90rpx 0rpx;
  637. font-size: 40rpx;
  638. font-weight: 300;
  639. position: relative;
  640. }
  641. .image-pic {
  642. border: 1rpx solid #F8F7F8;
  643. background-size: cover;
  644. background-repeat: no-repeat;
  645. // background-attachment:fixed;
  646. background-position: top;
  647. border-radius: 10rpx;
  648. }
  649. /* 文章内容 start*/
  650. .tn-blogger-content {
  651. &__wrap {
  652. margin: 30rpx;
  653. }
  654. &__info {
  655. &__btn {
  656. margin-right: -12rpx;
  657. opacity: 0.5;
  658. }
  659. }
  660. &__label {
  661. &__item {
  662. color: #1D2541;
  663. background-color: #F3F2F7;
  664. border-radius: 10rpx;
  665. font-size: 22rpx;
  666. padding: 5rpx 15rpx;
  667. margin: 5rpx 0 0 18rpx;
  668. &--prefix {
  669. font-size: 24rpx;
  670. color: #1D2541;
  671. padding-right: 10rpx;
  672. }
  673. }
  674. &__desc {
  675. line-height: 55rpx;
  676. }
  677. }
  678. &__main-image {
  679. border: 1rpx solid #F8F7F8;
  680. border-radius: 16rpx;
  681. &--1 {
  682. max-width: 690rpx;
  683. min-width: 690rpx;
  684. max-height: 400rpx;
  685. min-height: 400rpx;
  686. }
  687. &--2 {
  688. max-width: 260rpx;
  689. max-height: 260rpx;
  690. }
  691. &--3 {
  692. height: 212rpx;
  693. width: 100%;
  694. }
  695. }
  696. &__count-icon {
  697. font-size: 40rpx;
  698. padding-right: 5rpx;
  699. }
  700. }
  701. .image-wallpaper {
  702. padding: 160rpx 0rpx;
  703. font-size: 40rpx;
  704. font-weight: 300;
  705. position: relative;
  706. }
  707. .image-pic {
  708. background-size: cover;
  709. background-repeat: no-repeat;
  710. // background-attachment:fixed;
  711. background-position: top;
  712. border-radius: 10rpx;
  713. }
  714. /* 文章内容 end*/
  715. .circle {
  716. max-height: 100vh;
  717. }
  718. /* 底部安全边距 start*/
  719. .tn-tabbar-height {
  720. min-height: 120rpx;
  721. height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  722. height: calc(140rpx + constant(safe-area-inset-bottom));
  723. }
  724. /* 自定义导航栏内容 start */
  725. .custom-nav {
  726. height: 100%;
  727. &__back {
  728. margin: auto 5rpx;
  729. font-size: 40rpx;
  730. margin-right: 10rpx;
  731. margin-left: 30rpx;
  732. flex-basis: 5%;
  733. }
  734. &__search {
  735. flex-basis: 60%;
  736. width: 100%;
  737. height: 100%;
  738. &__box {
  739. width: 100%;
  740. height: 70%;
  741. padding: 10rpx 0;
  742. margin: 0 30rpx;
  743. border-radius: 60rpx 60rpx 0 60rpx;
  744. font-size: 24rpx;
  745. }
  746. &__icon {
  747. padding-right: 10rpx;
  748. margin-left: 20rpx;
  749. font-size: 30rpx;
  750. }
  751. &__text {
  752. color: #AAAAAA;
  753. }
  754. }
  755. }
  756. .logo-image {
  757. width: 60rpx;
  758. height: 60rpx;
  759. position: relative;
  760. margin-top: -15rpx;
  761. }
  762. .logo-pic {
  763. background-size: cover;
  764. background-repeat: no-repeat;
  765. // background-attachment:fixed;
  766. background-position: top;
  767. border-radius: 50%;
  768. }
  769. /* 自定义导航栏内容 end */
  770. /* 博主头像 start*/
  771. .image-circle {
  772. // padding: 95rpx;
  773. width: 190rpx;
  774. height: 190rpx;
  775. font-size: 40rpx;
  776. font-weight: 300;
  777. position: relative;
  778. }
  779. .image-pic {
  780. border: 1rpx solid #F8F7F8;
  781. background-size: cover;
  782. background-repeat: no-repeat;
  783. // background-attachment:fixed;
  784. background-position: top;
  785. border-radius: 10rpx;
  786. }
  787. .tn-color-cat {
  788. color: #1D2541;
  789. }
  790. .tn-bg-cat {
  791. background-color: #1D2541;
  792. }
  793. /* 文章内容 start*/
  794. .blogger {
  795. &__item {
  796. padding: 30rpx;
  797. }
  798. &__author {
  799. &__btn {
  800. margin-right: -12rpx;
  801. opacity: 0.5;
  802. }
  803. }
  804. &__desc {
  805. line-height: 30rpx;
  806. &__label {
  807. color: #1D2541;
  808. background-color: #F3F2F7;
  809. border-radius: 10rpx;
  810. font-size: 22rpx;
  811. padding: 5rpx 15rpx;
  812. margin: 5rpx 18rpx 0 0;
  813. &--prefix {
  814. font-size: 24rpx;
  815. color: #1D2541;
  816. padding-right: 10rpx;
  817. }
  818. }
  819. &__content {
  820. line-height: 50rpx;
  821. }
  822. }
  823. &__content {
  824. margin-top: 18rpx;
  825. padding-right: 18rpx;
  826. &__data {
  827. line-height: 46rpx;
  828. text-align: justify;
  829. overflow: hidden;
  830. transition: all 0.25s ease-in-out;
  831. }
  832. &__status {
  833. margin-top: 10rpx;
  834. font-size: 26rpx;
  835. color: #82B2FF;
  836. }
  837. }
  838. &__main-image {
  839. border: 1rpx solid #F8F7F8;
  840. border-radius: 16rpx;
  841. &--1 {
  842. max-width: 80%;
  843. max-height: 300rpx;
  844. }
  845. &--2 {
  846. max-width: 260rpx;
  847. max-height: 260rpx;
  848. }
  849. &--3 {
  850. height: 212rpx;
  851. width: 100%;
  852. }
  853. }
  854. &__count-icon {
  855. font-size: 40rpx;
  856. padding-right: 5rpx;
  857. }
  858. &__ad {
  859. width: 100%;
  860. height: 500rpx;
  861. transform: translate3d(0px, 0px, 0px) !important;
  862. ::v-deep .uni-swiper-slide-frame {
  863. transform: translate3d(0px, 0px, 0px) !important;
  864. }
  865. .uni-swiper-slide-frame {
  866. transform: translate3d(0px, 0px, 0px) !important;
  867. }
  868. &__item {
  869. position: absolute;
  870. width: 100%;
  871. height: 100%;
  872. transform-origin: left center;
  873. transform: translate3d(100%, 0px, 0px) scale(1) !important;
  874. transition: transform 0.25s ease-in-out;
  875. z-index: 1;
  876. &--0 {
  877. transform: translate3d(0%, 0px, 0px) scale(1) !important;
  878. z-index: 4;
  879. }
  880. &--1 {
  881. transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
  882. z-index: 3;
  883. }
  884. &--2 {
  885. transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
  886. z-index: 2;
  887. }
  888. }
  889. &__content {
  890. border-radius: 40rpx;
  891. width: 640rpx;
  892. height: 500rpx;
  893. overflow: hidden;
  894. }
  895. &__image {
  896. width: 100%;
  897. height: 100%;
  898. }
  899. }
  900. }
  901. /* 文章内容 end*/
  902. /* 间隔线 start*/
  903. .tn-strip-bottom {
  904. width: 100%;
  905. border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  906. }
  907. /* 间隔线 end*/
  908. /* 广告内容 start */
  909. .ad-image {
  910. width: 80rpx;
  911. height: 80rpx;
  912. position: relative;
  913. }
  914. .ad-pic {
  915. background-size: cover;
  916. background-repeat: no-repeat;
  917. // background-attachment:fixed;
  918. background-position: top;
  919. border-radius: 20%;
  920. }
  921. /* 自定义导航栏内容 end */
  922. /* 全屏轮播 start*/
  923. .card-swiper {
  924. height: 100vh !important;
  925. }
  926. .card-swiper swiper-item {
  927. width: 750rpx !important;
  928. left: 0rpx;
  929. box-sizing: border-box;
  930. overflow: initial;
  931. }
  932. .card-swiper swiper-item .swiper-item {
  933. width: 100%;
  934. display: block;
  935. height: 100vh;
  936. border-radius: 0rpx;
  937. transform: scale(1);
  938. transition: all 0.2s ease-in 0s;
  939. overflow: hidden;
  940. }
  941. .card-swiper swiper-item.cur .swiper-item {
  942. transform: none;
  943. transition: all 0.2s ease-in 0s;
  944. }
  945. .card-swiper swiper-item .swiper-item-png {
  946. margin-top: -50vh;
  947. width: 100%;
  948. display: block;
  949. border-radius: 0rpx;
  950. transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
  951. transition: all 0.6s ease 0s;
  952. // overflow: hidden;
  953. }
  954. .card-swiper swiper-item.cur .swiper-item-png {
  955. margin-top: -100vh;
  956. width: 900rpx;
  957. transform: translate(-80rpx, 0rpx) scale(1, 1);
  958. transition: all 0.6s ease 0s;
  959. }
  960. .image-banner {
  961. display: flex;
  962. align-items: center;
  963. justify-content: center;
  964. }
  965. .image-banner image {
  966. width: 100%;
  967. }
  968. /* 轮播指示点 start*/
  969. .indication {
  970. z-index: 9999;
  971. width: 100%;
  972. height: 36rpx;
  973. position: fixed;
  974. // display:flex;
  975. display: block;
  976. flex-direction: row;
  977. align-items: center;
  978. justify-content: center;
  979. }
  980. .spot {
  981. background-color: #000;
  982. opacity: 0.3;
  983. width: 10rpx;
  984. height: 10rpx;
  985. border-radius: 20rpx;
  986. margin: 20rpx 0 !important;
  987. left: 95vw;
  988. top: -60vh;
  989. position: relative;
  990. }
  991. .spot.active {
  992. opacity: 0.6;
  993. height: 30rpx;
  994. background-color: #000;
  995. }
  996. /* 资讯主图 start*/
  997. .image-article {
  998. border-radius: 8rpx;
  999. border: 1rpx solid #F8F7F8;
  1000. width: 200rpx;
  1001. height: 200rpx;
  1002. position: relative;
  1003. }
  1004. .image-pic {
  1005. background-size: cover;
  1006. background-repeat: no-repeat;
  1007. // background-attachment:fixed;
  1008. background-position: top;
  1009. border-radius: 10rpx;
  1010. }
  1011. .article-shadow {
  1012. border-radius: 15rpx;
  1013. box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  1014. }
  1015. /* 文字截取*/
  1016. .clamp-text-1 {
  1017. -webkit-line-clamp: 1;
  1018. display: -webkit-box;
  1019. -webkit-box-orient: vertical;
  1020. text-overflow: ellipsis;
  1021. overflow: hidden;
  1022. }
  1023. .clamp-text-2 {
  1024. -webkit-line-clamp: 2;
  1025. display: -webkit-box;
  1026. -webkit-box-orient: vertical;
  1027. text-overflow: ellipsis;
  1028. overflow: hidden;
  1029. }
  1030. /* 标签内容 start*/
  1031. .tn-tag-content {
  1032. &__item {
  1033. display: inline-block;
  1034. line-height: 35rpx;
  1035. color: #1D2541;
  1036. background-color: #F3F2F7;
  1037. border-radius: 10rpx;
  1038. font-size: 22rpx;
  1039. padding: 5rpx 15rpx;
  1040. &--prefix {
  1041. padding-right: 10rpx;
  1042. }
  1043. }
  1044. }
  1045. /* 图标容器9 start */
  1046. .icon9 {
  1047. &__item {
  1048. width: 30%;
  1049. background-color: #FFFFFF;
  1050. border-radius: 10rpx;
  1051. padding: 30rpx;
  1052. margin: 20rpx 10rpx;
  1053. transform: scale(1);
  1054. transition: transform 0.3s linear;
  1055. transform-origin: center center;
  1056. &--icon {
  1057. width: 110rpx;
  1058. height: 110rpx;
  1059. font-size: 65rpx;
  1060. border-radius: 50%;
  1061. margin: 20rpx 40rpx;
  1062. position: relative;
  1063. z-index: 1;
  1064. &::after {
  1065. content: " ";
  1066. position: absolute;
  1067. z-index: -1;
  1068. width: 100%;
  1069. height: 100%;
  1070. left: 0;
  1071. bottom: 0;
  1072. border-radius: inherit;
  1073. opacity: 1;
  1074. transform: scale(1, 1);
  1075. background-size: 100% 100%;
  1076. background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
  1077. }
  1078. }
  1079. }
  1080. }
  1081. /* 悬浮 */
  1082. .tnxuanfu {
  1083. animation: suspension 3s ease-in-out infinite;
  1084. }
  1085. @keyframes suspension {
  1086. 0%,
  1087. 100% {
  1088. transform: translateY(0);
  1089. }
  1090. 50% {
  1091. transform: translateY(-0.8rem);
  1092. }
  1093. }
  1094. /* 悬浮按钮 */
  1095. .button-shop {
  1096. width: 90rpx;
  1097. height: 90rpx;
  1098. display: flex;
  1099. flex-direction: row;
  1100. position: fixed;
  1101. /* bottom:200rpx;
  1102. right: 20rpx; */
  1103. left: 5rpx;
  1104. top: 5rpx;
  1105. z-index: 1001;
  1106. border-radius: 100px;
  1107. opacity: 0.9;
  1108. }
  1109. /* 按钮 */
  1110. .edit {
  1111. bottom: 300rpx;
  1112. right: 75rpx;
  1113. position: fixed;
  1114. z-index: 9999;
  1115. }
  1116. .pa,
  1117. .pa0 {
  1118. position: absolute
  1119. }
  1120. .pa0 {
  1121. left: 0;
  1122. top: 0
  1123. }
  1124. .bg0 {
  1125. width: 100rpx;
  1126. height: 100rpx;
  1127. top: 50%;
  1128. left: 50%;
  1129. transform: translate(-50%, -50%);
  1130. }
  1131. .bg1 {
  1132. width: 100%;
  1133. height: 100%;
  1134. }
  1135. .hx-box {
  1136. top: 50%;
  1137. left: 50%;
  1138. width: 100rpx;
  1139. height: 100rpx;
  1140. transform-style: preserve-3d;
  1141. transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
  1142. }
  1143. .hx-box .pr {
  1144. width: 100rpx;
  1145. height: 100rpx;
  1146. transform-style: preserve-3d;
  1147. animation: hxz 20s linear infinite;
  1148. }
  1149. @keyframes hxz {
  1150. 0% {
  1151. transform: rotateX(0deg);
  1152. }
  1153. 100% {
  1154. transform: rotateX(-360deg);
  1155. }
  1156. }
  1157. .hx-box .pr .pa0 {
  1158. width: 100rpx;
  1159. height: 100rpx;
  1160. /* border: 4px solid #5ec0ff; */
  1161. border-radius: 1000px;
  1162. }
  1163. .hx-box .pr .pa0 .span {
  1164. display: block;
  1165. width: 100%;
  1166. height: 100%;
  1167. background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
  1168. background-size: 100% 100%;
  1169. animation: hx 4s linear infinite;
  1170. }
  1171. @keyframes hx {
  1172. to {
  1173. transform: rotate(360deg);
  1174. }
  1175. }
  1176. .hx-k1 {
  1177. transform: rotateX(-60deg) rotateZ(-60deg)
  1178. }
  1179. .hx-k2 {
  1180. transform: rotateX(-30deg) rotateZ(-30deg)
  1181. }
  1182. .hx-k3 {
  1183. transform: rotateX(0deg) rotateZ(0deg)
  1184. }
  1185. .hx-k4 {
  1186. transform: rotateX(30deg) rotateZ(30deg)
  1187. }
  1188. .hx-k5 {
  1189. transform: rotateX(60deg) rotateZ(60deg)
  1190. }
  1191. .hx-k6 {
  1192. transform: rotateX(90deg) rotateZ(90deg)
  1193. }
  1194. /deep/ .tn-toast {
  1195. background-color: #000c !important;
  1196. }
  1197. .bg-content{
  1198. color: #fff;
  1199. background-image: url(./../../static/bg.png);
  1200. background-size: cover;
  1201. }
  1202. </style>