comm.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538
  1. @charset "UTF-8";
  2. /**
  3. * 下方引入的为Tuniao UI的集成样式文件,为scss预处理器,其中包含了一些"tn-"开头的自定义变量
  4. * 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
  5. * Tuniao UI自定义的css类名和scss变量,均以"tn-"开头,不会造成冲突,请放心使用
  6. */
  7. .circle.data-v-ad2d06f4 {
  8. max-height: 100vh;
  9. }
  10. /* 底部安全边距 start*/
  11. .tn-tabbar-height.data-v-ad2d06f4 {
  12. min-height: 120rpx;
  13. height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  14. height: calc(140rpx + constant(safe-area-inset-bottom));
  15. }
  16. /* 自定义导航栏内容 start */
  17. .custom-nav.data-v-ad2d06f4 {
  18. height: 100%;
  19. }
  20. .custom-nav__back.data-v-ad2d06f4 {
  21. margin: auto 5rpx;
  22. font-size: 40rpx;
  23. margin-right: 10rpx;
  24. margin-left: 30rpx;
  25. flex-basis: 5%;
  26. }
  27. .custom-nav__search.data-v-ad2d06f4 {
  28. flex-basis: 60%;
  29. width: 100%;
  30. height: 100%;
  31. }
  32. .custom-nav__search__box.data-v-ad2d06f4 {
  33. width: 100%;
  34. height: 70%;
  35. padding: 10rpx 0;
  36. margin: 0 30rpx;
  37. border-radius: 60rpx 60rpx 0 60rpx;
  38. font-size: 24rpx;
  39. }
  40. .custom-nav__search__icon.data-v-ad2d06f4 {
  41. padding-right: 10rpx;
  42. margin-left: 20rpx;
  43. font-size: 30rpx;
  44. }
  45. .custom-nav__search__text.data-v-ad2d06f4 {
  46. color: #AAAAAA;
  47. }
  48. .logo-image.data-v-ad2d06f4 {
  49. width: 60rpx;
  50. height: 60rpx;
  51. position: relative;
  52. margin-top: -15rpx;
  53. }
  54. .logo-pic.data-v-ad2d06f4 {
  55. background-size: cover;
  56. background-repeat: no-repeat;
  57. background-position: top;
  58. border-radius: 50%;
  59. }
  60. /* 自定义导航栏内容 end */
  61. /* 博主头像 start*/
  62. .image-circle.data-v-ad2d06f4 {
  63. width: 190rpx;
  64. height: 190rpx;
  65. font-size: 40rpx;
  66. font-weight: 300;
  67. position: relative;
  68. }
  69. .image-pic.data-v-ad2d06f4 {
  70. border: 1rpx solid #F8F7F8;
  71. background-size: cover;
  72. background-repeat: no-repeat;
  73. background-position: top;
  74. border-radius: 10rpx;
  75. }
  76. .tn-color-cat.data-v-ad2d06f4 {
  77. color: #1D2541;
  78. }
  79. .tn-bg-cat.data-v-ad2d06f4 {
  80. background-color: #1D2541;
  81. }
  82. /* 文章内容 start*/
  83. .blogger__item.data-v-ad2d06f4 {
  84. padding: 30rpx;
  85. }
  86. .blogger__author__btn.data-v-ad2d06f4 {
  87. margin-right: -12rpx;
  88. opacity: 0.5;
  89. }
  90. .blogger__desc.data-v-ad2d06f4 {
  91. line-height: 30rpx;
  92. }
  93. .blogger__desc__label.data-v-ad2d06f4 {
  94. color: #1D2541;
  95. background-color: #F3F2F7;
  96. border-radius: 10rpx;
  97. font-size: 22rpx;
  98. padding: 5rpx 15rpx;
  99. margin: 5rpx 18rpx 0 0;
  100. }
  101. .blogger__desc__label--prefix.data-v-ad2d06f4 {
  102. font-size: 24rpx;
  103. color: #1D2541;
  104. padding-right: 10rpx;
  105. }
  106. .blogger__desc__content.data-v-ad2d06f4 {
  107. line-height: 50rpx;
  108. }
  109. .blogger__content.data-v-ad2d06f4 {
  110. margin-top: 18rpx;
  111. padding-right: 18rpx;
  112. }
  113. .blogger__content__data.data-v-ad2d06f4 {
  114. line-height: 46rpx;
  115. text-align: justify;
  116. overflow: hidden;
  117. transition: all 0.25s ease-in-out;
  118. }
  119. .blogger__content__status.data-v-ad2d06f4 {
  120. margin-top: 10rpx;
  121. font-size: 26rpx;
  122. color: #82B2FF;
  123. }
  124. .blogger__main-image.data-v-ad2d06f4 {
  125. border: 1rpx solid #F8F7F8;
  126. border-radius: 16rpx;
  127. }
  128. .blogger__main-image--1.data-v-ad2d06f4 {
  129. max-width: 80%;
  130. max-height: 300rpx;
  131. }
  132. .blogger__main-image--2.data-v-ad2d06f4 {
  133. max-width: 260rpx;
  134. max-height: 260rpx;
  135. }
  136. .blogger__main-image--3.data-v-ad2d06f4 {
  137. height: 212rpx;
  138. width: 100%;
  139. }
  140. .blogger__count-icon.data-v-ad2d06f4 {
  141. font-size: 40rpx;
  142. padding-right: 5rpx;
  143. }
  144. .blogger__ad.data-v-ad2d06f4 {
  145. width: 100%;
  146. height: 500rpx;
  147. -webkit-transform: translate3d(0px, 0px, 0px) !important;
  148. transform: translate3d(0px, 0px, 0px) !important;
  149. }
  150. .blogger__ad.data-v-ad2d06f4 .uni-swiper-slide-frame {
  151. -webkit-transform: translate3d(0px, 0px, 0px) !important;
  152. transform: translate3d(0px, 0px, 0px) !important;
  153. }
  154. .blogger__ad .uni-swiper-slide-frame.data-v-ad2d06f4 {
  155. -webkit-transform: translate3d(0px, 0px, 0px) !important;
  156. transform: translate3d(0px, 0px, 0px) !important;
  157. }
  158. .blogger__ad__item.data-v-ad2d06f4 {
  159. position: absolute;
  160. width: 100%;
  161. height: 100%;
  162. -webkit-transform-origin: left center;
  163. transform-origin: left center;
  164. -webkit-transform: translate3d(100%, 0px, 0px) scale(1) !important;
  165. transform: translate3d(100%, 0px, 0px) scale(1) !important;
  166. transition: -webkit-transform 0.25s ease-in-out;
  167. transition: transform 0.25s ease-in-out;
  168. transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  169. z-index: 1;
  170. }
  171. .blogger__ad__item--0.data-v-ad2d06f4 {
  172. -webkit-transform: translate3d(0%, 0px, 0px) scale(1) !important;
  173. transform: translate3d(0%, 0px, 0px) scale(1) !important;
  174. z-index: 4;
  175. }
  176. .blogger__ad__item--1.data-v-ad2d06f4 {
  177. -webkit-transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
  178. transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
  179. z-index: 3;
  180. }
  181. .blogger__ad__item--2.data-v-ad2d06f4 {
  182. -webkit-transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
  183. transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
  184. z-index: 2;
  185. }
  186. .blogger__ad__content.data-v-ad2d06f4 {
  187. border-radius: 40rpx;
  188. width: 640rpx;
  189. height: 500rpx;
  190. overflow: hidden;
  191. }
  192. .blogger__ad__image.data-v-ad2d06f4 {
  193. width: 100%;
  194. height: 100%;
  195. }
  196. /* 文章内容 end*/
  197. /* 间隔线 start*/
  198. .tn-strip-bottom.data-v-ad2d06f4 {
  199. width: 100%;
  200. border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  201. }
  202. /* 间隔线 end*/
  203. /* 广告内容 start */
  204. .ad-image.data-v-ad2d06f4 {
  205. width: 80rpx;
  206. height: 80rpx;
  207. position: relative;
  208. }
  209. .ad-pic.data-v-ad2d06f4 {
  210. background-size: cover;
  211. background-repeat: no-repeat;
  212. background-position: top;
  213. border-radius: 20%;
  214. }
  215. /* 自定义导航栏内容 end */
  216. /* 全屏轮播 start*/
  217. .card-swiper.data-v-ad2d06f4 {
  218. height: 100vh !important;
  219. }
  220. .card-swiper swiper-item.data-v-ad2d06f4 {
  221. width: 750rpx !important;
  222. left: 0rpx;
  223. box-sizing: border-box;
  224. overflow: initial;
  225. }
  226. .card-swiper swiper-item .swiper-item.data-v-ad2d06f4 {
  227. width: 100%;
  228. display: block;
  229. height: 100vh;
  230. border-radius: 0rpx;
  231. -webkit-transform: scale(1);
  232. transform: scale(1);
  233. transition: all 0.2s ease-in 0s;
  234. overflow: hidden;
  235. }
  236. .card-swiper swiper-item.cur .swiper-item.data-v-ad2d06f4 {
  237. -webkit-transform: none;
  238. transform: none;
  239. transition: all 0.2s ease-in 0s;
  240. }
  241. .card-swiper swiper-item .swiper-item-png.data-v-ad2d06f4 {
  242. margin-top: -50vh;
  243. width: 100%;
  244. display: block;
  245. border-radius: 0rpx;
  246. -webkit-transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
  247. transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
  248. transition: all 0.6s ease 0s;
  249. }
  250. .card-swiper swiper-item.cur .swiper-item-png.data-v-ad2d06f4 {
  251. margin-top: -100vh;
  252. width: 900rpx;
  253. -webkit-transform: translate(-80rpx, 0rpx) scale(1, 1);
  254. transform: translate(-80rpx, 0rpx) scale(1, 1);
  255. transition: all 0.6s ease 0s;
  256. }
  257. .image-banner.data-v-ad2d06f4 {
  258. display: flex;
  259. align-items: center;
  260. justify-content: center;
  261. }
  262. .image-banner image.data-v-ad2d06f4 {
  263. width: 100%;
  264. }
  265. /* 轮播指示点 start*/
  266. .indication.data-v-ad2d06f4 {
  267. z-index: 9999;
  268. width: 100%;
  269. height: 36rpx;
  270. position: fixed;
  271. display: block;
  272. flex-direction: row;
  273. align-items: center;
  274. justify-content: center;
  275. }
  276. .spot.data-v-ad2d06f4 {
  277. background-color: #000;
  278. opacity: 0.3;
  279. width: 10rpx;
  280. height: 10rpx;
  281. border-radius: 20rpx;
  282. margin: 20rpx 0 !important;
  283. left: 95vw;
  284. top: -60vh;
  285. position: relative;
  286. }
  287. .spot.active.data-v-ad2d06f4 {
  288. opacity: 0.6;
  289. height: 30rpx;
  290. background-color: #000;
  291. }
  292. /* 资讯主图 start*/
  293. .image-article.data-v-ad2d06f4 {
  294. border-radius: 8rpx;
  295. border: 1rpx solid #F8F7F8;
  296. width: 200rpx;
  297. height: 200rpx;
  298. position: relative;
  299. }
  300. .image-pic.data-v-ad2d06f4 {
  301. background-size: cover;
  302. background-repeat: no-repeat;
  303. background-position: top;
  304. border-radius: 10rpx;
  305. }
  306. .article-shadow.data-v-ad2d06f4 {
  307. border-radius: 15rpx;
  308. box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  309. }
  310. /* 文字截取*/
  311. .clamp-text-1.data-v-ad2d06f4 {
  312. -webkit-line-clamp: 1;
  313. display: -webkit-box;
  314. -webkit-box-orient: vertical;
  315. text-overflow: ellipsis;
  316. overflow: hidden;
  317. }
  318. .clamp-text-2.data-v-ad2d06f4 {
  319. -webkit-line-clamp: 2;
  320. display: -webkit-box;
  321. -webkit-box-orient: vertical;
  322. text-overflow: ellipsis;
  323. overflow: hidden;
  324. }
  325. /* 标签内容 start*/
  326. .tn-tag-content__item.data-v-ad2d06f4 {
  327. display: inline-block;
  328. line-height: 35rpx;
  329. color: #1D2541;
  330. background-color: #F3F2F7;
  331. border-radius: 10rpx;
  332. font-size: 22rpx;
  333. padding: 5rpx 15rpx;
  334. }
  335. .tn-tag-content__item--prefix.data-v-ad2d06f4 {
  336. padding-right: 10rpx;
  337. }
  338. /* 图标容器9 start */
  339. .icon9__item.data-v-ad2d06f4 {
  340. width: 30%;
  341. background-color: #FFFFFF;
  342. border-radius: 10rpx;
  343. padding: 30rpx;
  344. margin: 20rpx 10rpx;
  345. -webkit-transform: scale(1);
  346. transform: scale(1);
  347. transition: -webkit-transform 0.3s linear;
  348. transition: transform 0.3s linear;
  349. transition: transform 0.3s linear, -webkit-transform 0.3s linear;
  350. -webkit-transform-origin: center center;
  351. transform-origin: center center;
  352. }
  353. .icon9__item--icon.data-v-ad2d06f4 {
  354. width: 110rpx;
  355. height: 110rpx;
  356. font-size: 65rpx;
  357. border-radius: 50%;
  358. margin: 20rpx 40rpx;
  359. position: relative;
  360. z-index: 1;
  361. }
  362. .icon9__item--icon.data-v-ad2d06f4::after {
  363. content: " ";
  364. position: absolute;
  365. z-index: -1;
  366. width: 100%;
  367. height: 100%;
  368. left: 0;
  369. bottom: 0;
  370. border-radius: inherit;
  371. opacity: 1;
  372. -webkit-transform: scale(1, 1);
  373. transform: scale(1, 1);
  374. background-size: 100% 100%;
  375. background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
  376. }
  377. /* 悬浮 */
  378. .tnxuanfu.data-v-ad2d06f4 {
  379. -webkit-animation: suspension-data-v-ad2d06f4 3s ease-in-out infinite;
  380. animation: suspension-data-v-ad2d06f4 3s ease-in-out infinite;
  381. }
  382. @-webkit-keyframes suspension-data-v-ad2d06f4 {
  383. 0%,
  384. 100% {
  385. -webkit-transform: translateY(0);
  386. transform: translateY(0);
  387. }
  388. 50% {
  389. -webkit-transform: translateY(-0.8rem);
  390. transform: translateY(-0.8rem);
  391. }
  392. }
  393. @keyframes suspension-data-v-ad2d06f4 {
  394. 0%,
  395. 100% {
  396. -webkit-transform: translateY(0);
  397. transform: translateY(0);
  398. }
  399. 50% {
  400. -webkit-transform: translateY(-0.8rem);
  401. transform: translateY(-0.8rem);
  402. }
  403. }
  404. /* 悬浮按钮 */
  405. .button-shop.data-v-ad2d06f4 {
  406. width: 90rpx;
  407. height: 90rpx;
  408. display: flex;
  409. flex-direction: row;
  410. position: fixed;
  411. /* bottom:200rpx;
  412. right: 20rpx; */
  413. left: 5rpx;
  414. top: 5rpx;
  415. z-index: 1001;
  416. border-radius: 100px;
  417. opacity: 0.9;
  418. }
  419. /* 按钮 */
  420. .edit.data-v-ad2d06f4 {
  421. bottom: 300rpx;
  422. right: 75rpx;
  423. position: fixed;
  424. z-index: 9999;
  425. }
  426. .pa.data-v-ad2d06f4,
  427. .pa0.data-v-ad2d06f4 {
  428. position: absolute;
  429. }
  430. .pa0.data-v-ad2d06f4 {
  431. left: 0;
  432. top: 0;
  433. }
  434. .bg0.data-v-ad2d06f4 {
  435. width: 100rpx;
  436. height: 100rpx;
  437. top: 50%;
  438. left: 50%;
  439. -webkit-transform: translate(-50%, -50%);
  440. transform: translate(-50%, -50%);
  441. }
  442. .bg1.data-v-ad2d06f4 {
  443. width: 100%;
  444. height: 100%;
  445. }
  446. .hx-box.data-v-ad2d06f4 {
  447. top: 50%;
  448. left: 50%;
  449. width: 100rpx;
  450. height: 100rpx;
  451. -webkit-transform-style: preserve-3d;
  452. transform-style: preserve-3d;
  453. -webkit-transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
  454. transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
  455. }
  456. .hx-box .pr.data-v-ad2d06f4 {
  457. width: 100rpx;
  458. height: 100rpx;
  459. -webkit-transform-style: preserve-3d;
  460. transform-style: preserve-3d;
  461. -webkit-animation: hxz-data-v-ad2d06f4 20s linear infinite;
  462. animation: hxz-data-v-ad2d06f4 20s linear infinite;
  463. }
  464. @-webkit-keyframes hxz-data-v-ad2d06f4 {
  465. 0% {
  466. -webkit-transform: rotateX(0deg);
  467. transform: rotateX(0deg);
  468. }
  469. 100% {
  470. -webkit-transform: rotateX(-360deg);
  471. transform: rotateX(-360deg);
  472. }
  473. }
  474. @keyframes hxz-data-v-ad2d06f4 {
  475. 0% {
  476. -webkit-transform: rotateX(0deg);
  477. transform: rotateX(0deg);
  478. }
  479. 100% {
  480. -webkit-transform: rotateX(-360deg);
  481. transform: rotateX(-360deg);
  482. }
  483. }
  484. .hx-box .pr .pa0.data-v-ad2d06f4 {
  485. width: 100rpx;
  486. height: 100rpx;
  487. /* border: 4px solid #5ec0ff; */
  488. border-radius: 1000px;
  489. }
  490. .hx-box .pr .pa0 .span.data-v-ad2d06f4 {
  491. display: block;
  492. width: 100%;
  493. height: 100%;
  494. background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
  495. background-size: 100% 100%;
  496. -webkit-animation: hx-data-v-ad2d06f4 4s linear infinite;
  497. animation: hx-data-v-ad2d06f4 4s linear infinite;
  498. }
  499. @-webkit-keyframes hx-data-v-ad2d06f4 {
  500. to {
  501. -webkit-transform: rotate(360deg);
  502. transform: rotate(360deg);
  503. }
  504. }
  505. @keyframes hx-data-v-ad2d06f4 {
  506. to {
  507. -webkit-transform: rotate(360deg);
  508. transform: rotate(360deg);
  509. }
  510. }
  511. .hx-k1.data-v-ad2d06f4 {
  512. -webkit-transform: rotateX(-60deg) rotateZ(-60deg);
  513. transform: rotateX(-60deg) rotateZ(-60deg);
  514. }
  515. .hx-k2.data-v-ad2d06f4 {
  516. -webkit-transform: rotateX(-30deg) rotateZ(-30deg);
  517. transform: rotateX(-30deg) rotateZ(-30deg);
  518. }
  519. .hx-k3.data-v-ad2d06f4 {
  520. -webkit-transform: rotateX(0deg) rotateZ(0deg);
  521. transform: rotateX(0deg) rotateZ(0deg);
  522. }
  523. .hx-k4.data-v-ad2d06f4 {
  524. -webkit-transform: rotateX(30deg) rotateZ(30deg);
  525. transform: rotateX(30deg) rotateZ(30deg);
  526. }
  527. .hx-k5.data-v-ad2d06f4 {
  528. -webkit-transform: rotateX(60deg) rotateZ(60deg);
  529. transform: rotateX(60deg) rotateZ(60deg);
  530. }
  531. .hx-k6.data-v-ad2d06f4 {
  532. -webkit-transform: rotateX(90deg) rotateZ(90deg);
  533. transform: rotateX(90deg) rotateZ(90deg);
  534. }
  535. .data-v-ad2d06f4 .basic-table-header {
  536. background-color: #edeeee;
  537. }