home.wxss 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804
  1. @charset "UTF-8";
  2. /**
  3. * 下方引入的为Tuniao UI的集成样式文件,为scss预处理器,其中包含了一些"tn-"开头的自定义变量
  4. * 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
  5. * Tuniao UI自定义的css类名和scss变量,均以"tn-"开头,不会造成冲突,请放心使用
  6. */
  7. .index.data-v-92bb8f34 {
  8. max-height: 100vh;
  9. }
  10. /* 底部安全边距 start*/
  11. .tn-tabbar-height.data-v-92bb8f34 {
  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. .card-swiper.data-v-92bb8f34 {
  18. height: 330rpx !important;
  19. }
  20. .card-swiper swiper-item.data-v-92bb8f34 {
  21. width: 750rpx !important;
  22. left: 0rpx;
  23. box-sizing: border-box;
  24. padding: 40rpx 30rpx 30rpx 30rpx;
  25. overflow: initial;
  26. }
  27. .card-swiper swiper-item .swiper-item.data-v-92bb8f34 {
  28. width: 100%;
  29. display: block;
  30. height: 100%;
  31. border-radius: 15rpx;
  32. -webkit-transform: scale(1);
  33. transform: scale(1);
  34. transition: all 0.2s ease-in 0s;
  35. }
  36. .card-swiper swiper-item.cur .swiper-item.data-v-92bb8f34 {
  37. -webkit-transform: none;
  38. transform: none;
  39. transition: all 0.2s ease-in 0s;
  40. }
  41. .card-swiper swiper-item .swiper-item-text.data-v-92bb8f34 {
  42. margin-top: -160rpx;
  43. text-align: center;
  44. width: 100%;
  45. display: block;
  46. height: 50%;
  47. border-radius: 10rpx;
  48. -webkit-transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
  49. transform: translate(100rpx, -60rpx) scale(0.9, 0.9);
  50. transition: all 0.6s ease 0s;
  51. overflow: hidden;
  52. }
  53. .card-swiper swiper-item.cur .swiper-item-text.data-v-92bb8f34 {
  54. margin-top: -220rpx;
  55. width: 100%;
  56. -webkit-transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
  57. transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
  58. transition: all 0.6s ease 0s;
  59. }
  60. .image-banner.data-v-92bb8f34 {
  61. border: 1rpx solid #F8F7F8;
  62. display: flex;
  63. align-items: center;
  64. justify-content: center;
  65. }
  66. .image-banner image.data-v-92bb8f34 {
  67. width: 100%;
  68. height: 100%;
  69. }
  70. /* 轮播指示点 start*/
  71. .indication.data-v-92bb8f34 {
  72. z-index: 9999;
  73. width: 100%;
  74. height: 36rpx;
  75. position: absolute;
  76. display: flex;
  77. flex-direction: row;
  78. align-items: center;
  79. justify-content: center;
  80. }
  81. .spot.data-v-92bb8f34 {
  82. background-color: #FFFFFF;
  83. opacity: 0.6;
  84. width: 10rpx;
  85. height: 10rpx;
  86. border-radius: 20rpx;
  87. top: -70rpx;
  88. margin: 0 8rpx !important;
  89. position: relative;
  90. }
  91. .spot.active.data-v-92bb8f34 {
  92. opacity: 1;
  93. width: 30rpx;
  94. background-color: #FFFFFF;
  95. }
  96. /* 图标容器12 start */
  97. .tn-three.data-v-92bb8f34 {
  98. position: absolute;
  99. top: 50%;
  100. right: 50%;
  101. bottom: 50%;
  102. left: 50%;
  103. -webkit-transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
  104. transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
  105. text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
  106. }
  107. .icon12__item.data-v-92bb8f34 {
  108. width: 30%;
  109. background-color: #FFFFFF;
  110. border-radius: 10rpx;
  111. padding: 30rpx;
  112. margin: 20rpx 10rpx;
  113. -webkit-transform: scale(1);
  114. transform: scale(1);
  115. transition: -webkit-transform 0.3s linear;
  116. transition: transform 0.3s linear;
  117. transition: transform 0.3s linear, -webkit-transform 0.3s linear;
  118. -webkit-transform-origin: center center;
  119. transform-origin: center center;
  120. }
  121. .icon12__item--icon.data-v-92bb8f34 {
  122. width: 100rpx;
  123. height: 100rpx;
  124. font-size: 60rpx;
  125. border-radius: 50%;
  126. margin-bottom: 18rpx;
  127. position: relative;
  128. z-index: 1;
  129. }
  130. .icon12__item--icon.data-v-92bb8f34::after {
  131. content: " ";
  132. position: absolute;
  133. z-index: -1;
  134. width: 100%;
  135. height: 100%;
  136. left: 0;
  137. bottom: 0;
  138. border-radius: inherit;
  139. opacity: 1;
  140. -webkit-transform: scale(1, 1);
  141. transform: scale(1, 1);
  142. background-size: 100% 100%;
  143. background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
  144. }
  145. /* 自定义导航栏内容 start */
  146. .custom-nav.data-v-92bb8f34 {
  147. height: 100%;
  148. }
  149. .custom-nav__back.data-v-92bb8f34 {
  150. margin: auto 5rpx;
  151. font-size: 40rpx;
  152. margin-right: 10rpx;
  153. margin-left: 30rpx;
  154. flex-basis: 5%;
  155. }
  156. .custom-nav__search.data-v-92bb8f34 {
  157. flex-basis: 70%;
  158. width: 100%;
  159. height: 100%;
  160. }
  161. .custom-nav__search__box.data-v-92bb8f34 {
  162. width: 100%;
  163. height: 70%;
  164. padding: 10rpx 0;
  165. margin: 0 30rpx;
  166. border-radius: 60rpx 60rpx 0 60rpx;
  167. font-size: 24rpx;
  168. }
  169. .custom-nav__search__icon.data-v-92bb8f34 {
  170. padding-right: 10rpx;
  171. margin-left: 20rpx;
  172. font-size: 30rpx;
  173. }
  174. .logo-image.data-v-92bb8f34 {
  175. width: 65rpx;
  176. height: 65rpx;
  177. position: relative;
  178. border: 1rpx solid #F8F7F8;
  179. border-radius: 50%;
  180. }
  181. .logo-pic.data-v-92bb8f34 {
  182. background-size: cover;
  183. background-repeat: no-repeat;
  184. background-position: top;
  185. border-radius: 50%;
  186. }
  187. /* 自定义导航栏内容 end */
  188. /* 热门图片 start*/
  189. .image-tuniao1.data-v-92bb8f34 {
  190. padding: 165rpx 0rpx;
  191. font-size: 40rpx;
  192. font-weight: 300;
  193. position: relative;
  194. }
  195. .image-tuniao2.data-v-92bb8f34 {
  196. padding: 75rpx 0rpx;
  197. font-size: 40rpx;
  198. font-weight: 300;
  199. position: relative;
  200. }
  201. .image-tuniao3.data-v-92bb8f34 {
  202. padding: 90rpx 0rpx;
  203. font-size: 40rpx;
  204. font-weight: 300;
  205. position: relative;
  206. }
  207. .image-pic.data-v-92bb8f34 {
  208. border: 1rpx solid #F8F7F8;
  209. background-size: cover;
  210. background-repeat: no-repeat;
  211. background-position: top;
  212. border-radius: 10rpx;
  213. }
  214. /* 文章内容 start*/
  215. .tn-blogger-content__wrap.data-v-92bb8f34 {
  216. margin: 30rpx;
  217. }
  218. .tn-blogger-content__info__btn.data-v-92bb8f34 {
  219. margin-right: -12rpx;
  220. opacity: 0.5;
  221. }
  222. .tn-blogger-content__label__item.data-v-92bb8f34 {
  223. color: #1D2541;
  224. background-color: #F3F2F7;
  225. border-radius: 10rpx;
  226. font-size: 22rpx;
  227. padding: 5rpx 15rpx;
  228. margin: 5rpx 0 0 18rpx;
  229. }
  230. .tn-blogger-content__label__item--prefix.data-v-92bb8f34 {
  231. font-size: 24rpx;
  232. color: #1D2541;
  233. padding-right: 10rpx;
  234. }
  235. .tn-blogger-content__label__desc.data-v-92bb8f34 {
  236. line-height: 55rpx;
  237. }
  238. .tn-blogger-content__main-image.data-v-92bb8f34 {
  239. border: 1rpx solid #F8F7F8;
  240. border-radius: 16rpx;
  241. }
  242. .tn-blogger-content__main-image--1.data-v-92bb8f34 {
  243. max-width: 690rpx;
  244. min-width: 690rpx;
  245. max-height: 400rpx;
  246. min-height: 400rpx;
  247. }
  248. .tn-blogger-content__main-image--2.data-v-92bb8f34 {
  249. max-width: 260rpx;
  250. max-height: 260rpx;
  251. }
  252. .tn-blogger-content__main-image--3.data-v-92bb8f34 {
  253. height: 212rpx;
  254. width: 100%;
  255. }
  256. .tn-blogger-content__count-icon.data-v-92bb8f34 {
  257. font-size: 40rpx;
  258. padding-right: 5rpx;
  259. }
  260. .image-wallpaper.data-v-92bb8f34 {
  261. padding: 160rpx 0rpx;
  262. font-size: 40rpx;
  263. font-weight: 300;
  264. position: relative;
  265. }
  266. .image-pic.data-v-92bb8f34 {
  267. background-size: cover;
  268. background-repeat: no-repeat;
  269. background-position: top;
  270. border-radius: 10rpx;
  271. }
  272. /* 文章内容 end*/
  273. .circle.data-v-92bb8f34 {
  274. max-height: 100vh;
  275. }
  276. /* 底部安全边距 start*/
  277. .tn-tabbar-height.data-v-92bb8f34 {
  278. min-height: 120rpx;
  279. height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  280. height: calc(140rpx + constant(safe-area-inset-bottom));
  281. }
  282. /* 自定义导航栏内容 start */
  283. .custom-nav.data-v-92bb8f34 {
  284. height: 100%;
  285. }
  286. .custom-nav__back.data-v-92bb8f34 {
  287. margin: auto 5rpx;
  288. font-size: 40rpx;
  289. margin-right: 10rpx;
  290. margin-left: 30rpx;
  291. flex-basis: 5%;
  292. }
  293. .custom-nav__search.data-v-92bb8f34 {
  294. flex-basis: 60%;
  295. width: 100%;
  296. height: 100%;
  297. }
  298. .custom-nav__search__box.data-v-92bb8f34 {
  299. width: 100%;
  300. height: 70%;
  301. padding: 10rpx 0;
  302. margin: 0 30rpx;
  303. border-radius: 60rpx 60rpx 0 60rpx;
  304. font-size: 24rpx;
  305. }
  306. .custom-nav__search__icon.data-v-92bb8f34 {
  307. padding-right: 10rpx;
  308. margin-left: 20rpx;
  309. font-size: 30rpx;
  310. }
  311. .custom-nav__search__text.data-v-92bb8f34 {
  312. color: #AAAAAA;
  313. }
  314. .logo-image.data-v-92bb8f34 {
  315. width: 60rpx;
  316. height: 60rpx;
  317. position: relative;
  318. margin-top: -15rpx;
  319. }
  320. .logo-pic.data-v-92bb8f34 {
  321. background-size: cover;
  322. background-repeat: no-repeat;
  323. background-position: top;
  324. border-radius: 50%;
  325. }
  326. /* 自定义导航栏内容 end */
  327. /* 博主头像 start*/
  328. .image-circle.data-v-92bb8f34 {
  329. width: 190rpx;
  330. height: 190rpx;
  331. font-size: 40rpx;
  332. font-weight: 300;
  333. position: relative;
  334. }
  335. .image-pic.data-v-92bb8f34 {
  336. border: 1rpx solid #F8F7F8;
  337. background-size: cover;
  338. background-repeat: no-repeat;
  339. background-position: top;
  340. border-radius: 10rpx;
  341. }
  342. .tn-color-cat.data-v-92bb8f34 {
  343. color: #1D2541;
  344. }
  345. .tn-bg-cat.data-v-92bb8f34 {
  346. background-color: #1D2541;
  347. }
  348. /* 文章内容 start*/
  349. .blogger__item.data-v-92bb8f34 {
  350. padding: 30rpx;
  351. }
  352. .blogger__author__btn.data-v-92bb8f34 {
  353. margin-right: -12rpx;
  354. opacity: 0.5;
  355. }
  356. .blogger__desc.data-v-92bb8f34 {
  357. line-height: 30rpx;
  358. }
  359. .blogger__desc__label.data-v-92bb8f34 {
  360. color: #1D2541;
  361. background-color: #F3F2F7;
  362. border-radius: 10rpx;
  363. font-size: 22rpx;
  364. padding: 5rpx 15rpx;
  365. margin: 5rpx 18rpx 0 0;
  366. }
  367. .blogger__desc__label--prefix.data-v-92bb8f34 {
  368. font-size: 24rpx;
  369. color: #1D2541;
  370. padding-right: 10rpx;
  371. }
  372. .blogger__desc__content.data-v-92bb8f34 {
  373. line-height: 50rpx;
  374. }
  375. .blogger__content.data-v-92bb8f34 {
  376. margin-top: 18rpx;
  377. padding-right: 18rpx;
  378. }
  379. .blogger__content__data.data-v-92bb8f34 {
  380. line-height: 46rpx;
  381. text-align: justify;
  382. overflow: hidden;
  383. transition: all 0.25s ease-in-out;
  384. }
  385. .blogger__content__status.data-v-92bb8f34 {
  386. margin-top: 10rpx;
  387. font-size: 26rpx;
  388. color: #82B2FF;
  389. }
  390. .blogger__main-image.data-v-92bb8f34 {
  391. border: 1rpx solid #F8F7F8;
  392. border-radius: 16rpx;
  393. }
  394. .blogger__main-image--1.data-v-92bb8f34 {
  395. max-width: 80%;
  396. max-height: 300rpx;
  397. }
  398. .blogger__main-image--2.data-v-92bb8f34 {
  399. max-width: 260rpx;
  400. max-height: 260rpx;
  401. }
  402. .blogger__main-image--3.data-v-92bb8f34 {
  403. height: 212rpx;
  404. width: 100%;
  405. }
  406. .blogger__count-icon.data-v-92bb8f34 {
  407. font-size: 40rpx;
  408. padding-right: 5rpx;
  409. }
  410. .blogger__ad.data-v-92bb8f34 {
  411. width: 100%;
  412. height: 500rpx;
  413. -webkit-transform: translate3d(0px, 0px, 0px) !important;
  414. transform: translate3d(0px, 0px, 0px) !important;
  415. }
  416. .blogger__ad.data-v-92bb8f34 .uni-swiper-slide-frame {
  417. -webkit-transform: translate3d(0px, 0px, 0px) !important;
  418. transform: translate3d(0px, 0px, 0px) !important;
  419. }
  420. .blogger__ad .uni-swiper-slide-frame.data-v-92bb8f34 {
  421. -webkit-transform: translate3d(0px, 0px, 0px) !important;
  422. transform: translate3d(0px, 0px, 0px) !important;
  423. }
  424. .blogger__ad__item.data-v-92bb8f34 {
  425. position: absolute;
  426. width: 100%;
  427. height: 100%;
  428. -webkit-transform-origin: left center;
  429. transform-origin: left center;
  430. -webkit-transform: translate3d(100%, 0px, 0px) scale(1) !important;
  431. transform: translate3d(100%, 0px, 0px) scale(1) !important;
  432. transition: -webkit-transform 0.25s ease-in-out;
  433. transition: transform 0.25s ease-in-out;
  434. transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  435. z-index: 1;
  436. }
  437. .blogger__ad__item--0.data-v-92bb8f34 {
  438. -webkit-transform: translate3d(0%, 0px, 0px) scale(1) !important;
  439. transform: translate3d(0%, 0px, 0px) scale(1) !important;
  440. z-index: 4;
  441. }
  442. .blogger__ad__item--1.data-v-92bb8f34 {
  443. -webkit-transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
  444. transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
  445. z-index: 3;
  446. }
  447. .blogger__ad__item--2.data-v-92bb8f34 {
  448. -webkit-transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
  449. transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
  450. z-index: 2;
  451. }
  452. .blogger__ad__content.data-v-92bb8f34 {
  453. border-radius: 40rpx;
  454. width: 640rpx;
  455. height: 500rpx;
  456. overflow: hidden;
  457. }
  458. .blogger__ad__image.data-v-92bb8f34 {
  459. width: 100%;
  460. height: 100%;
  461. }
  462. /* 文章内容 end*/
  463. /* 间隔线 start*/
  464. .tn-strip-bottom.data-v-92bb8f34 {
  465. width: 100%;
  466. border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  467. }
  468. /* 间隔线 end*/
  469. /* 广告内容 start */
  470. .ad-image.data-v-92bb8f34 {
  471. width: 80rpx;
  472. height: 80rpx;
  473. position: relative;
  474. }
  475. .ad-pic.data-v-92bb8f34 {
  476. background-size: cover;
  477. background-repeat: no-repeat;
  478. background-position: top;
  479. border-radius: 20%;
  480. }
  481. /* 自定义导航栏内容 end */
  482. /* 全屏轮播 start*/
  483. .card-swiper.data-v-92bb8f34 {
  484. height: 100vh !important;
  485. }
  486. .card-swiper swiper-item.data-v-92bb8f34 {
  487. width: 750rpx !important;
  488. left: 0rpx;
  489. box-sizing: border-box;
  490. overflow: initial;
  491. }
  492. .card-swiper swiper-item .swiper-item.data-v-92bb8f34 {
  493. width: 100%;
  494. display: block;
  495. height: 100vh;
  496. border-radius: 0rpx;
  497. -webkit-transform: scale(1);
  498. transform: scale(1);
  499. transition: all 0.2s ease-in 0s;
  500. overflow: hidden;
  501. }
  502. .card-swiper swiper-item.cur .swiper-item.data-v-92bb8f34 {
  503. -webkit-transform: none;
  504. transform: none;
  505. transition: all 0.2s ease-in 0s;
  506. }
  507. .card-swiper swiper-item .swiper-item-png.data-v-92bb8f34 {
  508. margin-top: -50vh;
  509. width: 100%;
  510. display: block;
  511. border-radius: 0rpx;
  512. -webkit-transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
  513. transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
  514. transition: all 0.6s ease 0s;
  515. }
  516. .card-swiper swiper-item.cur .swiper-item-png.data-v-92bb8f34 {
  517. margin-top: -100vh;
  518. width: 900rpx;
  519. -webkit-transform: translate(-80rpx, 0rpx) scale(1, 1);
  520. transform: translate(-80rpx, 0rpx) scale(1, 1);
  521. transition: all 0.6s ease 0s;
  522. }
  523. .image-banner.data-v-92bb8f34 {
  524. display: flex;
  525. align-items: center;
  526. justify-content: center;
  527. }
  528. .image-banner image.data-v-92bb8f34 {
  529. width: 100%;
  530. }
  531. /* 轮播指示点 start*/
  532. .indication.data-v-92bb8f34 {
  533. z-index: 9999;
  534. width: 100%;
  535. height: 36rpx;
  536. position: fixed;
  537. display: block;
  538. flex-direction: row;
  539. align-items: center;
  540. justify-content: center;
  541. }
  542. .spot.data-v-92bb8f34 {
  543. background-color: #000;
  544. opacity: 0.3;
  545. width: 10rpx;
  546. height: 10rpx;
  547. border-radius: 20rpx;
  548. margin: 20rpx 0 !important;
  549. left: 95vw;
  550. top: -60vh;
  551. position: relative;
  552. }
  553. .spot.active.data-v-92bb8f34 {
  554. opacity: 0.6;
  555. height: 30rpx;
  556. background-color: #000;
  557. }
  558. /* 资讯主图 start*/
  559. .image-article.data-v-92bb8f34 {
  560. border-radius: 8rpx;
  561. border: 1rpx solid #F8F7F8;
  562. width: 200rpx;
  563. height: 200rpx;
  564. position: relative;
  565. }
  566. .image-pic.data-v-92bb8f34 {
  567. background-size: cover;
  568. background-repeat: no-repeat;
  569. background-position: top;
  570. border-radius: 10rpx;
  571. }
  572. .article-shadow.data-v-92bb8f34 {
  573. border-radius: 15rpx;
  574. box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  575. }
  576. /* 文字截取*/
  577. .clamp-text-1.data-v-92bb8f34 {
  578. -webkit-line-clamp: 1;
  579. display: -webkit-box;
  580. -webkit-box-orient: vertical;
  581. text-overflow: ellipsis;
  582. overflow: hidden;
  583. }
  584. .clamp-text-2.data-v-92bb8f34 {
  585. -webkit-line-clamp: 2;
  586. display: -webkit-box;
  587. -webkit-box-orient: vertical;
  588. text-overflow: ellipsis;
  589. overflow: hidden;
  590. }
  591. /* 标签内容 start*/
  592. .tn-tag-content__item.data-v-92bb8f34 {
  593. display: inline-block;
  594. line-height: 35rpx;
  595. color: #1D2541;
  596. background-color: #F3F2F7;
  597. border-radius: 10rpx;
  598. font-size: 22rpx;
  599. padding: 5rpx 15rpx;
  600. }
  601. .tn-tag-content__item--prefix.data-v-92bb8f34 {
  602. padding-right: 10rpx;
  603. }
  604. /* 图标容器9 start */
  605. .icon9__item.data-v-92bb8f34 {
  606. width: 30%;
  607. background-color: #FFFFFF;
  608. border-radius: 10rpx;
  609. padding: 30rpx;
  610. margin: 20rpx 10rpx;
  611. -webkit-transform: scale(1);
  612. transform: scale(1);
  613. transition: -webkit-transform 0.3s linear;
  614. transition: transform 0.3s linear;
  615. transition: transform 0.3s linear, -webkit-transform 0.3s linear;
  616. -webkit-transform-origin: center center;
  617. transform-origin: center center;
  618. }
  619. .icon9__item--icon.data-v-92bb8f34 {
  620. width: 110rpx;
  621. height: 110rpx;
  622. font-size: 65rpx;
  623. border-radius: 50%;
  624. margin: 20rpx 40rpx;
  625. position: relative;
  626. z-index: 1;
  627. }
  628. .icon9__item--icon.data-v-92bb8f34::after {
  629. content: " ";
  630. position: absolute;
  631. z-index: -1;
  632. width: 100%;
  633. height: 100%;
  634. left: 0;
  635. bottom: 0;
  636. border-radius: inherit;
  637. opacity: 1;
  638. -webkit-transform: scale(1, 1);
  639. transform: scale(1, 1);
  640. background-size: 100% 100%;
  641. background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
  642. }
  643. /* 悬浮 */
  644. .tnxuanfu.data-v-92bb8f34 {
  645. -webkit-animation: suspension-data-v-92bb8f34 3s ease-in-out infinite;
  646. animation: suspension-data-v-92bb8f34 3s ease-in-out infinite;
  647. }
  648. @-webkit-keyframes suspension-data-v-92bb8f34 {
  649. 0%,
  650. 100% {
  651. -webkit-transform: translateY(0);
  652. transform: translateY(0);
  653. }
  654. 50% {
  655. -webkit-transform: translateY(-0.8rem);
  656. transform: translateY(-0.8rem);
  657. }
  658. }
  659. @keyframes suspension-data-v-92bb8f34 {
  660. 0%,
  661. 100% {
  662. -webkit-transform: translateY(0);
  663. transform: translateY(0);
  664. }
  665. 50% {
  666. -webkit-transform: translateY(-0.8rem);
  667. transform: translateY(-0.8rem);
  668. }
  669. }
  670. /* 悬浮按钮 */
  671. .button-shop.data-v-92bb8f34 {
  672. width: 90rpx;
  673. height: 90rpx;
  674. display: flex;
  675. flex-direction: row;
  676. position: fixed;
  677. /* bottom:200rpx;
  678. right: 20rpx; */
  679. left: 5rpx;
  680. top: 5rpx;
  681. z-index: 1001;
  682. border-radius: 100px;
  683. opacity: 0.9;
  684. }
  685. /* 按钮 */
  686. .edit.data-v-92bb8f34 {
  687. bottom: 300rpx;
  688. right: 75rpx;
  689. position: fixed;
  690. z-index: 9999;
  691. }
  692. .pa.data-v-92bb8f34,
  693. .pa0.data-v-92bb8f34 {
  694. position: absolute;
  695. }
  696. .pa0.data-v-92bb8f34 {
  697. left: 0;
  698. top: 0;
  699. }
  700. .bg0.data-v-92bb8f34 {
  701. width: 100rpx;
  702. height: 100rpx;
  703. top: 50%;
  704. left: 50%;
  705. -webkit-transform: translate(-50%, -50%);
  706. transform: translate(-50%, -50%);
  707. }
  708. .bg1.data-v-92bb8f34 {
  709. width: 100%;
  710. height: 100%;
  711. }
  712. .hx-box.data-v-92bb8f34 {
  713. top: 50%;
  714. left: 50%;
  715. width: 100rpx;
  716. height: 100rpx;
  717. -webkit-transform-style: preserve-3d;
  718. transform-style: preserve-3d;
  719. -webkit-transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
  720. transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
  721. }
  722. .hx-box .pr.data-v-92bb8f34 {
  723. width: 100rpx;
  724. height: 100rpx;
  725. -webkit-transform-style: preserve-3d;
  726. transform-style: preserve-3d;
  727. -webkit-animation: hxz-data-v-92bb8f34 20s linear infinite;
  728. animation: hxz-data-v-92bb8f34 20s linear infinite;
  729. }
  730. @-webkit-keyframes hxz-data-v-92bb8f34 {
  731. 0% {
  732. -webkit-transform: rotateX(0deg);
  733. transform: rotateX(0deg);
  734. }
  735. 100% {
  736. -webkit-transform: rotateX(-360deg);
  737. transform: rotateX(-360deg);
  738. }
  739. }
  740. @keyframes hxz-data-v-92bb8f34 {
  741. 0% {
  742. -webkit-transform: rotateX(0deg);
  743. transform: rotateX(0deg);
  744. }
  745. 100% {
  746. -webkit-transform: rotateX(-360deg);
  747. transform: rotateX(-360deg);
  748. }
  749. }
  750. .hx-box .pr .pa0.data-v-92bb8f34 {
  751. width: 100rpx;
  752. height: 100rpx;
  753. /* border: 4px solid #5ec0ff; */
  754. border-radius: 1000px;
  755. }
  756. .hx-box .pr .pa0 .span.data-v-92bb8f34 {
  757. display: block;
  758. width: 100%;
  759. height: 100%;
  760. background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
  761. background-size: 100% 100%;
  762. -webkit-animation: hx-data-v-92bb8f34 4s linear infinite;
  763. animation: hx-data-v-92bb8f34 4s linear infinite;
  764. }
  765. @-webkit-keyframes hx-data-v-92bb8f34 {
  766. to {
  767. -webkit-transform: rotate(360deg);
  768. transform: rotate(360deg);
  769. }
  770. }
  771. @keyframes hx-data-v-92bb8f34 {
  772. to {
  773. -webkit-transform: rotate(360deg);
  774. transform: rotate(360deg);
  775. }
  776. }
  777. .hx-k1.data-v-92bb8f34 {
  778. -webkit-transform: rotateX(-60deg) rotateZ(-60deg);
  779. transform: rotateX(-60deg) rotateZ(-60deg);
  780. }
  781. .hx-k2.data-v-92bb8f34 {
  782. -webkit-transform: rotateX(-30deg) rotateZ(-30deg);
  783. transform: rotateX(-30deg) rotateZ(-30deg);
  784. }
  785. .hx-k3.data-v-92bb8f34 {
  786. -webkit-transform: rotateX(0deg) rotateZ(0deg);
  787. transform: rotateX(0deg) rotateZ(0deg);
  788. }
  789. .hx-k4.data-v-92bb8f34 {
  790. -webkit-transform: rotateX(30deg) rotateZ(30deg);
  791. transform: rotateX(30deg) rotateZ(30deg);
  792. }
  793. .hx-k5.data-v-92bb8f34 {
  794. -webkit-transform: rotateX(60deg) rotateZ(60deg);
  795. transform: rotateX(60deg) rotateZ(60deg);
  796. }
  797. .hx-k6.data-v-92bb8f34 {
  798. -webkit-transform: rotateX(90deg) rotateZ(90deg);
  799. transform: rotateX(90deg) rotateZ(90deg);
  800. }
  801. .data-v-92bb8f34 .tn-toast {
  802. background-color: #000c !important;
  803. }