爱简收旧衣按件回收前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

823 lines
19 KiB

2 weeks ago
1 week ago
2 weeks ago
2 weeks ago
1 week ago
2 weeks ago
2 weeks ago
2 weeks ago
1 week ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
1 week ago
2 weeks ago
2 weeks ago
1 week ago
2 weeks ago
1 week ago
2 weeks ago
1 week ago
2 weeks ago
1 week ago
2 weeks ago
2 weeks ago
1 week ago
2 weeks ago
1 week ago
2 weeks ago
  1. <template>
  2. <view class="container safe-area">
  3. <!-- 顶部banner -->
  4. <view class="banner">
  5. <image src="https://oss.budingxiaoshuo.com/upload/banner_1748251969135.png" mode=""></image>
  6. </view>
  7. <view class="content">
  8. <!-- 回收流程 -->
  9. <view class="process-section">
  10. <view class="section-header">
  11. <text class="title">回收流程</text>
  12. </view>
  13. <view class="process-grid">
  14. <view class="process-item" v-for="(item, index) in processes" :key="index">
  15. <image :src="item.icon" mode="aspectFit" class="process-icon"></image>
  16. <text class="process-text">{{item.text}}</text>
  17. <!-- <text class="process-number">{{index + 1}}</text> -->
  18. </view>
  19. </view>
  20. <button class="submit-btn" hover-class="submit-btn-hover" @click="getPickupto">
  21. <text class="submit-btn-hearder">快速免费上门</text>
  22. <text class="btn-desc">点击开始预约</text>
  23. <image src="/static/home/1745478917401 3.png" mode="aspectFit" class="arrow-icon"></image>
  24. <image src="/static/home/1745478917401 4.png" mode="aspectFit" class="arrow-icon-left"></image>
  25. </button>
  26. </view>
  27. <uv-divider :dashed="true" ></uv-divider>
  28. <!-- 服务城市 -->
  29. <view class="city-section" @click="goCity">
  30. <view class="city-header">
  31. <text>已开通包邮服务城市有哪些</text>
  32. <uni-icons type="right" size="16" color="#999"></uni-icons>
  33. </view>
  34. <text class="city-list">武汉市北京市上海市武汉市北京市上海市...</text>
  35. </view>
  36. <view class="Xiadan-section">
  37. <image src="/static/home/不会下单.png" alt="" class="process-icon"/>
  38. <text class="left-text">不会下单联系客服了解回收流程</text>
  39. <view class="right" @click="goService">
  40. <image src="/static/home/联系客服.png" mode=""></image>
  41. <text>联系客服</text>
  42. </view>
  43. </view>
  44. <!-- 关于我们 -->
  45. <view class="about-section">
  46. <view class="section-header">
  47. <text class="title">关于我们</text>
  48. </view>
  49. <view class="about-footer" @click="goAbout">
  50. <view class="about-header">
  51. <image src="/static/home/关于我们.png" mode="aspectFit" class="logo"></image>
  52. <!-- <text class="about-title">关于我们</text> -->
  53. </view>
  54. <view class="about-content">
  55. <text>免费寄送件验秒到账助环保</text>
  56. <text class="about-desc">让二手交易更轻松让地球多一份绿意</text>
  57. </view>
  58. <uni-icons type="right" size="16" color="#999"></uni-icons>
  59. </view>
  60. </view>
  61. <!-- 价格概览 -->
  62. <view class="price-section">
  63. <view class="section-header">
  64. <text class="title">价格概览</text>
  65. <view class="more">
  66. <uni-icons type="right" size="14" color="#999"></uni-icons>
  67. <text>查看更多</text>
  68. </view>
  69. </view>
  70. <view class="price-grid">
  71. <view class="price-item" v-for="(item, index) in priceList" :key="index">
  72. <image v-if="item.icon" :src="item.icon" mode="aspectFit" class="item-icon"></image>
  73. <view v-else class="item-icon placeholder"></view>
  74. <text class="item-name">{{item.name}}</text>
  75. <text class="item-price">¥ {{item.price}}
  76. <text class="item-price-right">/{{item.unit}}</text>
  77. </text>
  78. </view>
  79. </view>
  80. </view>
  81. <!-- 最近回收 -->
  82. <view class="recent-section">
  83. <view class="section-header">
  84. <text class="title">最近回收</text>
  85. </view>
  86. <view class="records-grid">
  87. <view
  88. class="record-item"
  89. v-for="(item, index) in records"
  90. :key="index"
  91. @tap="goToInspectionReport(item)"
  92. >
  93. <image src="/static/home/1745571336565.png" mode=""></image>
  94. <text class="location">{{item.location}}</text>
  95. <text class="user-id">****{{item.userId}}</text>
  96. <text class="user-id-f">成功完成衣物回收已到账</text>
  97. <text class="amount">+ ¥{{item.amount}}</text>
  98. </view>
  99. </view>
  100. </view>
  101. <!-- 回收去向 -->
  102. <view class="destination-section">
  103. <view class="section-header">
  104. <text class="title">回收去向</text>
  105. </view>
  106. <view class="destination-grid">
  107. <view class="destination-item " :class="`destination-item${index + 1}`" v-for="(item, index) in destinations" :key="index">
  108. <image :src="item.icon" mode="aspectFit" class="dest-icon"></image>
  109. <view class="dest-info">
  110. <text class="dest-title">{{item.title}}</text>
  111. <text class="dest-desc">{{item.desc}}</text>
  112. </view>
  113. </view>
  114. </view>
  115. </view>
  116. </view>
  117. <!-- 根据角色显示不同的导航栏 -->
  118. <uv-tabbar
  119. :value="value"
  120. :fixed="true"
  121. @change="changeTo"
  122. >
  123. <uv-tabbar-item text="首页" >
  124. <template v-slot:active-icon>
  125. <image class="icon" src="/static/home/首页-点击.png"></image>
  126. </template>
  127. <template v-slot:inactive-icon>
  128. <image class="icon" src="/static/home/首页-未点击.png"></image>
  129. </template>
  130. </uv-tabbar-item>
  131. <uv-tabbar-item text="回收" >
  132. <template v-slot:active-icon>
  133. <image class="icon" src="/static/home/回收-点击.png"></image>
  134. </template>
  135. <template v-slot:inactive-icon>
  136. <image class="icon" src="/static/home/回收-未点击.png"></image>
  137. </template>
  138. </uv-tabbar-item>
  139. <uv-tabbar-item text="我的" >
  140. <template v-slot:active-icon>
  141. <image class="icon" src="/static/home/我的-点击.png"></image>
  142. </template>
  143. <template v-slot:inactive-icon>
  144. <image class="icon" src="/static/home/我的-未点击.png"></image>
  145. </template>
  146. </uv-tabbar-item>
  147. </uv-tabbar>
  148. </view>
  149. </template>
  150. <script>
  151. import pullRefreshMixin from '../mixins/pullRefreshMixin.js'
  152. export default {
  153. mixins: [pullRefreshMixin],
  154. data() {
  155. return {
  156. value:0,
  157. processes: [
  158. // { icon: '/static/home/① 在线预约.png', text: '在线预约' },
  159. // { icon: '/static/home/② 快递上门.png', text: '快递上门' },
  160. // { icon: '/static/home/③ 透明质检.png', text: '透明质检' },
  161. // { icon: '/static/home/④ 现金打款.png', text: '现金打款' }
  162. ],
  163. priceList: [],
  164. priceListStatic: [
  165. { icon: '/static/home/羽绒服.png', name: '羽绒服', price: '3-10', unit: '件' },
  166. { icon: '/static/home/鞋子.png', name: '鞋子', price: '3-10', unit: '件' },
  167. { icon: '/static/home/包包.png', name: '包包', price: '3-10', unit: '件' },
  168. { icon: '/static/home/床被.png', name: '床被', price: '3-10', unit: '件' },
  169. { icon: '/static/home/品牌服饰.png', name: '品牌服饰', price: '3-10', unit: '件' },
  170. { icon: '/static/home/T 恤衬衣.png', name: 'T恤衬衫', price: '3-10', unit: '件' },
  171. { icon: '/static/home/羽绒裤.png', name: '羽绒裤', price: '3-10', unit: '件' },
  172. { icon: '/static/home/儿童羽绒服.png', name: '儿童羽绒服', price: '3-10', unit: '件' }
  173. ],
  174. records: Array(6).fill().map(() => ({
  175. location: '天津市',
  176. amount: '50',
  177. userId: '5513'
  178. })),
  179. destinations: [
  180. {
  181. icon: '/static/home/爱心援乡.png',
  182. title: '爱心援乡',
  183. desc: '精准帮扶贫困群体'
  184. },
  185. {
  186. icon: '/static/home/回塑新源.png',
  187. title: '回塑新源',
  188. desc: '塑料的第二次成型'
  189. },
  190. {
  191. icon: '/static/home/织物出海.png',
  192. title: '织物出海',
  193. desc: '分拣出最高价值'
  194. },
  195. {
  196. icon: '/static/home/碳循再生.png',
  197. title: '碳循再生',
  198. desc: '减碳从出发生系统'
  199. }
  200. ]
  201. }
  202. },
  203. methods: {
  204. changeTo(e){
  205. this.value = e
  206. console.log(e,'111')
  207. if(e==1){
  208. uni.reLaunch({
  209. url: '/pages/component/recycle'
  210. },true);
  211. }else if(e == 2){
  212. uni.reLaunch({
  213. url: '/pages/component/my'
  214. },true);
  215. }
  216. },
  217. goAbout(){
  218. uni.navigateTo({
  219. url: '/pages/subcomponent/about'
  220. })
  221. },
  222. goCity(){
  223. uni.navigateTo({
  224. url: '/pages/baoyou-city/baoyou-city'
  225. })
  226. },
  227. getPickupto(){
  228. uni.navigateTo({
  229. url: '/pages/subcomponent/pickup'
  230. })
  231. },
  232. async onRefresh() {
  233. await new Promise(resolve => setTimeout(resolve, 1000))
  234. },
  235. getAreaList() {
  236. this.$api('getAreaList', {}, (res) => {
  237. console.log(res,'getAreaList');
  238. if (res.code == 200 && Array.isArray(res.result)) {
  239. // 按sort升序排序
  240. const sorted = res.result.slice().sort((a, b) => a.sort - b.sort)
  241. this.processes = sorted.map(item => ({
  242. icon: item.image,
  243. text: item.title
  244. }))
  245. }
  246. })
  247. },
  248. goService(){
  249. uni.navigateTo({
  250. url: '/pages/subcomponent/admin_faq'
  251. })
  252. },
  253. getPricePreview() {
  254. this.$api('getPricePreviewClassList', {}, res => {
  255. if (res && res.success && Array.isArray(res.result)) {
  256. console.log(res,'getPricePreview');
  257. // 只取一级分类,按sort升序
  258. const firstLevel = res.result.filter(item => item.pid === '0').sort((a, b) => a.sort - b.sort)
  259. this.priceList = firstLevel.map(item => {
  260. // 从静态表中找图片和价格
  261. const staticItem = this.priceListStatic.find(s => s.name.replace(/\s/g, '') === item.title.replace(/\s/g, ''))
  262. console.log({
  263. icon: staticItem ? staticItem.icon : '',
  264. name: item.title,
  265. price: staticItem ? staticItem.price : '',
  266. unit: '件'
  267. });
  268. return {
  269. icon: staticItem ? staticItem.icon : '',
  270. name: item.title,
  271. price: staticItem ? staticItem.price : '',
  272. unit: '件'
  273. }
  274. })
  275. }
  276. })
  277. },
  278. getRecentGoods() {
  279. this.$api('getRecentGoodsList', {}, res => {
  280. if (res && res.success && Array.isArray(res.result) && res.result.length > 0) {
  281. // 假设接口字段与records一致
  282. this.records = res.result
  283. } else {
  284. // 无数据时用模拟数据兜底
  285. this.records = Array(6).fill().map(() => ({
  286. location: '天津市',
  287. amount: '50',
  288. userId: '5513'
  289. }))
  290. }
  291. })
  292. },
  293. goToInspectionReport(item) {
  294. uni.navigateTo({
  295. url: '/pages/subcomponent/inspection-report'
  296. })
  297. }
  298. },
  299. onLoad() {
  300. this.getAreaList();
  301. this.getPricePreview();
  302. this.getRecentGoods();
  303. // console.log(this.processes,'222')
  304. }
  305. }
  306. </script>
  307. <style lang="scss" scoped>
  308. .container {
  309. min-height: 100vh;
  310. background-color: #f8f8f8;
  311. display: flex;
  312. flex-direction: column;
  313. padding-bottom: calc(var(--window-bottom) + 70px);
  314. }
  315. .safe-area {
  316. padding-bottom: constant(safe-area-inset-bottom);
  317. padding-bottom: env(safe-area-inset-bottom);
  318. }
  319. .banner {
  320. width: 100%;
  321. height: 380rpx;
  322. position: relative;
  323. overflow: hidden;
  324. border-radius: 0 0 30rpx 30rpx;
  325. image {
  326. width: 100%;
  327. height: 100%;
  328. }
  329. }
  330. .content {
  331. // flex: 1;
  332. width: 90%;
  333. margin: -70rpx auto 0;
  334. position: relative;
  335. z-index: 3;
  336. padding-bottom: 20rpx;
  337. }
  338. .Xiadan-section{
  339. display: flex;
  340. // justify-content: space-around;
  341. align-items: center;
  342. margin-bottom: 20rpx;
  343. background: linear-gradient(to bottom, #fff3db 0%,#fffefb 50%);
  344. image{
  345. width: 80rpx;
  346. height: 80rpx;
  347. }
  348. .left-text{
  349. font-family: PingFang SC;
  350. font-weight: 400;
  351. font-size: 12px;
  352. line-height: 140%;
  353. letter-spacing: 0%;
  354. }
  355. .right{
  356. display: flex;
  357. // flex-direction: row-reverse;
  358. box-sizing: border-box;
  359. align-items: center;
  360. justify-content: center;
  361. background-color: #fff0d2;
  362. color: #da7143;
  363. font-size: 24rpx;
  364. // flex-grow: 2;
  365. border: 1px solid #da7143;
  366. border-radius: 10rpx;
  367. width: 25%;
  368. image{
  369. width: 40rpx;
  370. height: 40rpx;
  371. }
  372. }
  373. }
  374. .section-header {
  375. display: flex;
  376. // justify-content: space-around;
  377. align-items: center;
  378. margin-bottom: 20rpx;
  379. .title {
  380. font-size: 32rpx;
  381. font-weight: bold;
  382. color: #333;
  383. }
  384. .more {
  385. // justify-content: right;
  386. display: flex;
  387. flex-direction: row-reverse;
  388. align-items: center;
  389. color: #999;
  390. font-size: 24rpx;
  391. flex-grow: 2;
  392. // width: 100%;
  393. // margin-right: 0 auto;
  394. }
  395. }
  396. .process-section {
  397. background: #fff;
  398. border-radius: 50rpx;
  399. padding: 30rpx;
  400. margin-bottom: 20rpx;
  401. background: linear-gradient(to bottom, #fff5e1 0%,#fffefb 30%);
  402. .contact-service {
  403. display: flex;
  404. align-items: center;
  405. font-size: 24rpx;
  406. color: #666;
  407. border: 1px solid #da7143;
  408. background-color: #fff0d2;
  409. .service-icon {
  410. width: 32rpx;
  411. height: 32rpx;
  412. margin-right: 8rpx;
  413. }
  414. }
  415. .process-grid {
  416. display: grid;
  417. grid-template-columns: repeat(4, 1fr);
  418. gap: 20rpx;
  419. margin: 30rpx 0;
  420. }
  421. .process-item {
  422. position: relative;
  423. display: flex;
  424. flex-direction: column;
  425. align-items: center;
  426. background-color: #fff8ea;
  427. // left: 0; right: 0;
  428. .process-icon {
  429. width: 80rpx;
  430. height: 80rpx;
  431. margin-bottom: 10rpx;
  432. }
  433. .process-text {
  434. font-size: 24rpx;
  435. color: #333;
  436. }
  437. .process-number {
  438. position: absolute;
  439. top: -10rpx;
  440. left: 50%;
  441. transform: translateX(-50%);
  442. font-size: 24rpx;
  443. color: #999;
  444. }
  445. }
  446. .submit-btn {
  447. background: linear-gradient(to right, #ffd01e, #ff8917);
  448. border-radius: 70rpx;
  449. // padding: 20rpx;
  450. text-align: center;
  451. position: relative;
  452. // border: none;
  453. display: flex;
  454. flex-direction: column;
  455. overflow: visible;
  456. text {
  457. color: #ffffff;
  458. font-size: 32rpx;
  459. font-weight: bold;
  460. line-height: 55rpx;
  461. // display: block;
  462. }
  463. .btn-desc {
  464. font-size: 24rpx;
  465. font-weight: normal;
  466. // margin-top: 4rpx;
  467. }
  468. .arrow-icon {
  469. position: absolute;
  470. right: 10rpx;
  471. top: 10%;
  472. transform: translateY(-50%);
  473. width: 40rpx;
  474. height: 40rpx;
  475. // z-index: 5;
  476. }
  477. .arrow-icon-left {
  478. position: absolute;
  479. left: 1rpx;
  480. top: 90%;
  481. transform: translateY(-50%);
  482. width: 40rpx;
  483. height: 40rpx;
  484. // z-index: 4;
  485. }
  486. }
  487. }
  488. .city-section {
  489. background: #fff;
  490. border-radius: 20rpx;
  491. padding: 30rpx;
  492. margin-bottom: 20rpx;
  493. .city-header {
  494. display: flex;
  495. justify-content: space-between;
  496. align-items: center;
  497. font-size: 28rpx;
  498. color: #333;
  499. margin-bottom: 10rpx;
  500. }
  501. .city-list {
  502. font-size: 24rpx;
  503. color: #999;
  504. }
  505. }
  506. .price-section {
  507. background: #f0f9eb;
  508. border-radius: 20rpx;
  509. padding: 30rpx;
  510. margin-bottom: 20rpx;
  511. background-color: #fffefb;
  512. background: linear-gradient(to bottom, #fff3db 0%,#fffefb 5%);
  513. .section-header{
  514. margin-bottom: 40rpx;
  515. }
  516. .price-grid {
  517. display: grid;
  518. grid-template-columns: repeat(2, 1fr);
  519. gap: 20rpx;
  520. }
  521. .price-item {
  522. display: flex;
  523. flex-direction: column;
  524. align-items: center;
  525. background: #fff;
  526. border-radius: 16rpx;
  527. padding: 30rpx;
  528. background-color: #fff8ea;
  529. .item-icon {
  530. width: 80rpx;
  531. height: 80rpx;
  532. margin-bottom: 10rpx;
  533. &.placeholder {
  534. width: 80rpx;
  535. height: 80rpx;
  536. margin-bottom: 10rpx;
  537. background: #f5f5f5;
  538. border-radius: 16rpx;
  539. }
  540. }
  541. .item-name {
  542. font-size: 26rpx;
  543. color: #333;
  544. margin-bottom: 6rpx;
  545. }
  546. .item-price {
  547. font-family: PingFang SC;
  548. font-weight: 400;
  549. font-size: 24rpx;
  550. line-height: 140%;
  551. letter-spacing: 0%;
  552. text-align: center;
  553. .item-price-right{
  554. text-align: center;
  555. font-size: 24rpx;
  556. color: #666;
  557. line-height: 140%;
  558. letter-spacing: 0%;
  559. }
  560. }
  561. }
  562. }
  563. .recent-section {
  564. background: #f0f9eb;
  565. border-radius: 20rpx;
  566. padding: 30rpx;
  567. margin-bottom: 20rpx;
  568. background-color: #fffefb;
  569. background: linear-gradient(to bottom, #e8ffe0 0%,#fffefb 15%);
  570. .records-grid {
  571. display: grid;
  572. grid-template-columns: repeat(3, 1fr);
  573. gap: 20rpx;
  574. }
  575. .record-item {
  576. display: flex;
  577. flex-direction: column;
  578. align-items: center;
  579. background: linear-gradient(to top, #e8ffe0 0%,#fffefb 100%);
  580. border-radius: 16rpx;
  581. padding: 30rpx;
  582. background-color: #fff8ea;
  583. image{
  584. width: 60rpx;
  585. height: 60rpx;
  586. }
  587. .location {
  588. font-size: 24rpx;
  589. color: #666;
  590. }
  591. .amount {
  592. font-size: 28rpx;
  593. color: #13ac47;
  594. font-weight: bold;
  595. margin: 4rpx 0;
  596. }
  597. .user-id {
  598. font-family: PingFang SC;
  599. font-weight: 400;
  600. font-size: 12rpx;
  601. line-height: 140%;
  602. letter-spacing: 0%;
  603. text-align: center;
  604. color: #183c5c;
  605. }
  606. .user-id-f{
  607. font-family: PingFang SC;
  608. font-weight: 400;
  609. font-size: 12rpx;
  610. line-height: 140%;
  611. letter-spacing: 0%;
  612. text-align: center;
  613. color: #9b9b9b;
  614. }
  615. }
  616. }
  617. .destination-section {
  618. // background: #fff;
  619. border-radius: 20rpx;
  620. padding: 30rpx;
  621. margin-bottom: 20rpx;
  622. background: linear-gradient(to bottom, #f2f0fc 0%,#fffefb 10%);
  623. padding-bottom: calc(var(--window-bottom) + 60px);
  624. .destination-grid {
  625. display: grid;
  626. grid-template-columns: repeat(2, 1fr);
  627. gap: 20rpx;
  628. }
  629. .destination-item {
  630. display: flex;
  631. align-items: center;
  632. // background: #fff9f9;
  633. border-radius: 16rpx;
  634. padding: 20rpx;
  635. .dest-icon {
  636. width: 60rpx;
  637. height: 60rpx;
  638. margin-right: 16rpx;
  639. }
  640. .dest-info {
  641. flex: 1;
  642. .dest-title {
  643. font-size: 26rpx;
  644. color: #333;
  645. margin-bottom: 4rpx;
  646. }
  647. .dest-desc {
  648. font-size: 22rpx;
  649. color: #999;
  650. }
  651. }
  652. }
  653. }
  654. .destination-item1{
  655. background: linear-gradient(to top, #ffebeb,#fffefb);
  656. }
  657. .destination-item2{
  658. background: linear-gradient(to top, #ebf8ff,#fffefb);
  659. }
  660. .destination-item3{
  661. background: linear-gradient(to top, #ebedff,#fffefb);
  662. }
  663. .destination-item4{
  664. background: linear-gradient(to top, #ebfff2,#fffefb);
  665. }
  666. .about-section {
  667. background: linear-gradient(to bottom, #fff3db 0%,#fffefb 30%);
  668. border-radius: 20rpx;
  669. padding: 30rpx;
  670. display: flex;
  671. justify-content: space-between;
  672. flex-direction: column;
  673. .about-footer{
  674. display: flex;
  675. flex-direction: row;
  676. align-items: center;
  677. justify-content: center;
  678. }
  679. .about-header {
  680. display: flex;
  681. align-items: center;
  682. .logo {
  683. width: 60rpx;
  684. height: 60rpx;
  685. margin-right: 16rpx;
  686. }
  687. .about-title {
  688. font-size: 28rpx;
  689. color: #333;
  690. }
  691. }
  692. .about-content {
  693. flex: 1;
  694. margin-left: 20rpx;
  695. text {
  696. display: block;
  697. font-size: 26rpx;
  698. color: #333;
  699. }
  700. .about-desc {
  701. font-size: 22rpx;
  702. color: #999;
  703. margin-top: 4rpx;
  704. }
  705. }
  706. }
  707. .tab-bar {
  708. position: fixed;
  709. bottom: 0;
  710. left: 0;
  711. right: 0;
  712. height: 100rpx;
  713. background-color: #fff;
  714. display: flex;
  715. justify-content: space-around;
  716. align-items: center;
  717. border-top: 1rpx solid #f5f5f5;
  718. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  719. .tab-item {
  720. display: flex;
  721. flex-direction: column;
  722. align-items: center;
  723. padding: 10rpx 0;
  724. transition: all 0.3s ease;
  725. .tab-icon {
  726. width: 48rpx;
  727. height: 48rpx;
  728. margin-bottom: 6rpx;
  729. }
  730. text {
  731. font-size: 22rpx;
  732. color: #666;
  733. transition: color 0.3s ease;
  734. }
  735. &.active {
  736. text {
  737. color: #ff5e00;
  738. }
  739. }
  740. &:active {
  741. transform: scale(0.95);
  742. }
  743. }
  744. }
  745. @keyframes fadeInUp {
  746. from {
  747. opacity: 0;
  748. transform: translateY(20rpx);
  749. }
  750. to {
  751. opacity: 1;
  752. transform: translateY(0);
  753. }
  754. }
  755. @keyframes fadeInScale {
  756. from {
  757. opacity: 0;
  758. transform: scale(0.8);
  759. }
  760. to {
  761. opacity: 1;
  762. transform: scale(1);
  763. }
  764. }
  765. </style>