talk
/
talk_appAmin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页顶部导航栏ui 还原

main
Connor 2024-05-08 10:16:46 +08:00
parent ad9ad1b748
commit 44026b81c5
1 changed files with 391 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

577
pages/index.vue
View File

@ -1,36 +1,66 @@
<template>
<view style="background: linear-gradient(-90deg, #f8f8e2, #c9f6f5);">
<view class="" >
</view>
<view class="top-plus">
<!-- 顶部导航栏 -->
<!-- <u-navbar
leftText="返回"
:fixed="false"
title="个人中心"
:safeAreaInsetTop="false"
>
<view
class="u-nav-slot"
slot="left"
>
<u-icon
name="arrow-left"
size="19"
></u-icon>
<u-line
direction="column"
:hairline="false"
length="16"
margin="0 8px"
></u-line>
<u-icon
name="home"
size="20"
></u-icon>
</view>
</u-navbar> -->
<view class="top">
<view style="padding-left: 32rpx;">
<!-- <u-icon name="calendar" size="28"></u-icon> -->
<image style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_register.png" mode=""></image>
</view>
<view style="position: relative; padding-left: 27rpx;">
<!-- <u-icon name="plus-circle" size="28" @click="postOpen = !postOpen"></u-icon> -->
<image @click="postOpen = !postOpen" style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_motion2.png" mode=""></image>
<view class="modal" v-if="postOpen">
<text style="margin-bottom: 15rpx;">发布话题</text>
<!-- <br /> -->
<text>发布活动</text>
<view class="top-left">
<view class="" style="margin-right: 27rpx;">
<image style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_register.png" mode=""></image>
</view>
<view class="">
<image @click="postOpen = !postOpen" style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_motion2.png" mode=""></image>
</view>
</view>
<view></view>
<view class="" style="font-size: 100px;">
<up-tabs :current="viewIndex" :list="list1" lineColor="#B3D7FF" lineWidth="25" @click="click" :activeStyle="{
color: '#303133',
fontWeight: 'bold',
transform: 'scale(1.05)',
fontSize: '40rpx',
marginBottom: '12rpx'
}" :inactiveStyle="{
color: '#606266',
transform: 'scale(1)',
fontSize: '40rpx'
}" itemStyle="font-size: 40rpx;"></up-tabs>
<view class="top-center">
<up-tabs :current="viewIndex" :list="list1" lineColor="#B3D7FF" lineWidth="25" @click="click" :activeStyle="{
color: '#303133',
fontWeight: 'bold',
transform: 'none',
fontSize: '40rpx',
marginBottom: '12rpx',
paddingTop: '10rpx'
}" :inactiveStyle="{
color: '#606266',
transform: 'none',
fontSize: '40rpx'
}" itemStyle="font-size: 40rpx;"></up-tabs>
</view>
<view class="top-right">
</view>
</view>
<!-- 搜索栏 -->
<view>
<view class="search">
@ -54,6 +84,11 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
</view>
</view>
</view>
<!-- +tanchuang -->
<view class="modal" v-if="postOpen">
<text style="margin-bottom: 15rpx;">发布话题</text>
<text>发布活动</text>
</view>
<!-- 热门弹出层 -->
<up-popup :round="20" :show="searchOpen" mode="bottom" @close="searchOpen = false" @open="searchOpen = true">
<view style="height: 77vh; position: relative;">
@ -65,155 +100,290 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
</view>
<view class="">
<text style="font-size: 26rpx; color: #A3A3A3;">点击选择类目，仅可选择一个</text>
<view style="width: 100rpx; height: 100rpx; border:1px soldi #c9f6f5">
</view>
</view>
</view>
</up-popup>
<!-- 中间内容 -->
<view class="page-center">
<!-- 关注 -->
<view v-if="viewIndex == 0" style="padding-top: 40rpx;">
<view style="padding-left: 32rpx; padding-bottom: 27rpx;">
<up-text bold="true" size="33rpx" color="#000" text="我关注的人"></up-text>
</view>
<up-scroll-list :indicator="false">
<view v-for="(item, index) in avatatlist" :key="index" class="container">
<!-- <image :src="item.thumb"></image> -->
<div class="item">
<div class="avatar-container">
<up-avatar :src="item" size="120rpx"></up-avatar>
</div>
<div class="text-container">
<up-text size="26rpx" text="爱吃饭的小张" align="center"></up-text>
</div>
</div>
</view>
</up-scroll-list>
<view class="page-line"></view>
<swiper class="page-center" style="height: 70vh;" :current=viewIndex @change="swiperChange">
<swiper-item>
<!-- 中间内容 -->
<view class="page-center">
<!-- 关注 -->
<view style="padding-top: 40rpx;">
<view style="padding-left: 32rpx; padding-bottom: 27rpx;">
<up-text bold="true" size="33rpx" color="#000" text="我关注的人"></up-text>
</view>
<up-scroll-list :indicator="false">
<view v-for="(item, index) in avatatlist" :key="index" class="container">
<!-- <image :src="item.thumb"></image> -->
<div class="item">
<div class="avatar-container">
<up-avatar :src="item" size="120rpx"></up-avatar>
</div>
<div class="text-container">
<up-text size="26rpx" text="爱吃饭的小张" align="center"></up-text>
</div>
</div>
</view>
</up-scroll-list>
<view class="page-line"></view>
</view>
<!-- 话题投稿列表 -->
<view class="post-item">
<view class="post-list-item">
<view @click.stop="toUser('跳转到用户个人空间')">
<view style="position: relative;">
<up-avatar :src="src" size="84rpx"></up-avatar>
<view v-if="userType == 1" class="red-v">
<img style="width: 30rpx; height: 30rpx;" src="../static/images/icon/appRedV.png" alt="" />
</view>
</view>
</view>
<view class="center">
<view class="post-top-box">
<view class="uname">
<!-- <text v-if="userType == 1" class="official">官方</text> -->
<text class="username">{{ username.substring(0, 10) }}</text>
</view>
<view class="">
<text v-if="postTop>0" class="officials">置顶</text>
<text v-if="poststatus==1" class="officials">审核中</text>
<text v-if="poststatus==2" class="officials">已下架</text>
</view>
<view style="padding-top: 34rpx; padding-right: 10rpx;" v-if="viewIndex == 1">
<up-text class="officials" bold="true" size="15" color="#3478FC" text="关注"></up-text>
</view>
</view>
<view style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
<text class="time">{{createTime}}</text>·<text class="time">{{postaddress}}</text>
</view>
</view>
</view>
<view class="post-content">
<up-text v-if="posttitle" :text="posttitle" bold="true" size="16" lines="2"></up-text>
<view style="height: 8px;"></view>
<up-text :text="postcontent" size="15" color="#424242" lineHeight="21" lines="2"></up-text>
<view style="height: 8px;"></view>
<!-- <rich-text class="post-text" :nodes="postcontent"></rich-text> -->
<block v-if="posttype == 1">
<!-- <up-album :urls="urls2" multipleSize="95" space="3" style="width: 100%"></up-album> -->
<!--一张图片-->
<block v-if="urls2.length == 1">
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="urls2[0]"
@tap.stop="previewImage(urls2[0], urls2)"></image>
</block>
<!--二张图片-->
<block v-if="urls2.length == 2">
<view class="img-style-2">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
<!--三张图片-->
<block v-if="urls2.length == 3">
<view class="img-style-3">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
<!--四张图片-->
<block v-if="urls2.length == 4">
<view class="img-style-4">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
</block>
</view>
<!-- 标签 -->
<view v-if="posttab" style="margin-top: 18rpx;">
<!-- <u-icon class="icon" name="map-fill"></u-icon> -->
<!-- <text>{{ posttab }}</text> -->
<view style="display: flex;">
<text
style="color: #3477FC; margin-left: 2%; font-size: 24rpx; font-weight: 600; background-color: #F7F8FA; border-radius: 4px; padding: 3px;"
v-for="(tabItem, index2) in posttab" :key="index2"
:text="'#' + tabItem">{{'#' + tabItem}}</text>
</view>
</view>
<!-- 底部 -->
<view class="post-list-bottom">
<view class="p-item" style="width: 36%;">
<!-- <text class="iconfont icon-quanzi"></text> -->
<!-- <u-icon name="share" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png" mode=""></image>
<text class="count">{{ readCount }}</text>
</view>
<view v-if="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
<!-- <u-icon name="heart-fill" size="40rpx" color="#cc0000"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png" mode=""></image>
<text class="count">{{ likeCount }}</text>
</view>
<view v-if="!isLike" class="p-item" @click.stop="addCollection('点赞')">
<!-- <u-icon name="heart" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png" mode=""></image>
<text class="count">{{ likeCount }}</text>
</view>
<view class="p-item margin50">
<!-- <text class="iconfont icon-pinglun"></text> -->
<!-- <u-icon name="chat" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png" mode=""></image>
<text class="count">{{ commentCount }}</text>
</view>
<view class="p-item margin50">
<!-- <text class="iconfont icon-pinglun"></text> -->
<view class="" v-if="!isFavorite" @click.stop="cancelFavorite('取消收藏')">
<!-- <u-icon name="star" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onFavorite.png" mode=""></image>
</view>
<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noFavorite.png" mode=""></image>
</view>
<text class="count">{{ favoriteCount }}</text>
</view>
</view>
<u-line></u-line>
</view>
</view>
</swiper-item>
<swiper-item>
<!-- 中间内容 -->
<view class="page-center">
<!-- 话题投稿列表 -->
<view class="post-item">
<view class="post-list-item">
<view @click.stop="toUser('跳转到用户个人空间')">
<view style="position: relative;">
<up-avatar :src="src" size="84rpx"></up-avatar>
<view v-if="userType == 1" class="red-v">
<img style="width: 30rpx; height: 30rpx;" src="../static/images/icon/appRedV.png" alt="" />
</view>
</view>
</view>
<view class="center">
<view class="post-top-box">
<view class="uname">
<!-- <text v-if="userType == 1" class="official">官方</text> -->
<text class="username">{{ username.substring(0, 10) }}</text>
</view>
<view class="">
<text v-if="postTop>0" class="officials">置顶</text>
<text v-if="poststatus==1" class="officials">审核中</text>
<text v-if="poststatus==2" class="officials">已下架</text>
</view>
<view style="padding-top: 34rpx; padding-right: 10rpx;" v-if="viewIndex == 1">
<up-text class="officials" bold="true" size="15" color="#3478FC" text="关注"></up-text>
</view>
</view>
<view style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
<text class="time">{{createTime}}</text>·<text class="time">{{postaddress}}</text>
</view>
</view>
</view>
<view class="post-content">
<up-text v-if="posttitle" :text="posttitle" bold="true" size="16" lines="2"></up-text>
<view style="height: 8px;"></view>
<up-text :text="postcontent" size="15" color="#424242" lineHeight="21" lines="2"></up-text>
<view style="height: 8px;"></view>
<!-- <rich-text class="post-text" :nodes="postcontent"></rich-text> -->
<block v-if="posttype == 1">
<!-- <up-album :urls="urls2" multipleSize="95" space="3" style="width: 100%"></up-album> -->
<!--一张图片-->
<block v-if="urls2.length == 1">
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="urls2[0]"
@tap.stop="previewImage(urls2[0], urls2)"></image>
</block>
<!--二张图片-->
<block v-if="urls2.length == 2">
<view class="img-style-2">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
<!--三张图片-->
<block v-if="urls2.length == 3">
<view class="img-style-3">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
<!--四张图片-->
<block v-if="urls2.length == 4">
<view class="img-style-4">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
</block>
</view>
<!-- 标签 -->
<view v-if="posttab" style="margin-top: 18rpx;">
<!-- <u-icon class="icon" name="map-fill"></u-icon> -->
<!-- <text>{{ posttab }}</text> -->
<view style="display: flex;">
<text
style="color: #3477FC; margin-left: 2%; font-size: 24rpx; font-weight: 600; background-color: #F7F8FA; border-radius: 4px; padding: 3px;"
v-for="(tabItem, index2) in posttab" :key="index2"
:text="'#' + tabItem">{{'#' + tabItem}}</text>
</view>
</view>
<!-- 底部 -->
<view class="post-list-bottom">
<view class="p-item" style="width: 36%;">
<!-- <text class="iconfont icon-quanzi"></text> -->
<!-- <u-icon name="share" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png" mode=""></image>
<text class="count">{{ readCount }}</text>
</view>
<view v-if="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
<!-- <u-icon name="heart-fill" size="40rpx" color="#cc0000"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png" mode=""></image>
<text class="count">{{ likeCount }}</text>
</view>
<view v-if="!isLike" class="p-item" @click.stop="addCollection('点赞')">
<!-- <u-icon name="heart" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png" mode=""></image>
<text class="count">{{ likeCount }}</text>
</view>
<view class="p-item margin50">
<!-- <text class="iconfont icon-pinglun"></text> -->
<!-- <u-icon name="chat" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png" mode=""></image>
<text class="count">{{ commentCount }}</text>
</view>
<view class="p-item margin50">
<!-- <text class="iconfont icon-pinglun"></text> -->
<view class="" v-if="!isFavorite" @click.stop="cancelFavorite('取消收藏')">
<!-- <u-icon name="star" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onFavorite.png" mode=""></image>
</view>
<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noFavorite.png" mode=""></image>
</view>
<text class="count">{{ favoriteCount }}</text>
</view>
</view>
<u-line></u-line>
</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- 话题投稿列表 -->
<view class="post-item">
<view class="post-list-item">
<view @click.stop="toUser('跳转到用户个人空间')">
<view style="position: relative;">
<up-avatar :src="src" size="84rpx"></up-avatar>
<view v-if="userType == 1" class="red-v">
<img style="width: 30rpx; height: 30rpx;" src="../static/images/icon/appRedV.png" alt="" />
</view>
</view>
</view>
<view class="center">
<view class="post-top-box">
<view class="uname">
<!-- <text v-if="userType == 1" class="official">官方</text> -->
<text class="username">{{ username.substring(0, 10) }}</text>
</view>
<view class="">
<text v-if="postTop>0" class="officials">置顶</text>
<text v-if="poststatus==1" class="officials">审核中</text>
<text v-if="poststatus==2" class="officials">已下架</text>
</view>
<view style="padding-top: 34rpx; padding-right: 10rpx;" v-if="viewIndex == 1">
<up-text class="officials" bold="true" size="15" color="#3478FC" text="关注"></up-text>
</view>
</view>
<view style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
<text class="time">{{createTime}}</text>·<text class="time">{{postaddress}}</text>
</view>
</view>
</view>
<view class="post-content">
<up-text v-if="posttitle" :text="posttitle" bold="true" size="16" lines="2"></up-text>
<view style="height: 8px;"></view>
<up-text :text="postcontent" size="15" color="#424242" lineHeight="21" lines="2"></up-text>
<view style="height: 8px;"></view>
<!-- <rich-text class="post-text" :nodes="postcontent"></rich-text> -->
<block v-if="posttype == 1">
<!-- <up-album :urls="urls2" multipleSize="95" space="3" style="width: 100%"></up-album> -->
<!--一张图片-->
<block v-if="urls2.length == 1">
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="urls2[0]"
@tap.stop="previewImage(urls2[0], urls2)"></image>
</block>
<!--二张图片-->
<block v-if="urls2.length == 2">
<view class="img-style-2">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
<!--三张图片-->
<block v-if="urls2.length == 3">
<view class="img-style-3">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
<!--四张图片-->
<block v-if="urls2.length == 4">
<view class="img-style-4">
<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
</image>
</view>
</block>
</block>
</view>
<!-- 标签 -->
<view v-if="posttab" style="margin-top: 18rpx;">
<!-- <u-icon class="icon" name="map-fill"></u-icon> -->
<!-- <text>{{ posttab }}</text> -->
<view style="display: flex;">
<text
style="color: #3477FC; margin-left: 2%; font-size: 24rpx; font-weight: 600; background-color: #F7F8FA; border-radius: 4px; padding: 3px;"
v-for="(tabItem, index2) in posttab" :key="index2"
:text="'#' + tabItem">{{'#' + tabItem}}</text>
</view>
</view>
<!-- 底部 -->
<view class="post-list-bottom">
<view class="p-item" style="width: 36%;">
<!-- <text class="iconfont icon-quanzi"></text> -->
<!-- <u-icon name="share" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png" mode=""></image>
<text class="count">{{ readCount }}</text>
</view>
<view v-if="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
<!-- <u-icon name="heart-fill" size="40rpx" color="#cc0000"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png" mode=""></image>
<text class="count">{{ likeCount }}</text>
</view>
<view v-if="!isLike" class="p-item" @click.stop="addCollection('点赞')">
<!-- <u-icon name="heart" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png" mode=""></image>
<text class="count">{{ likeCount }}</text>
</view>
<view class="p-item margin50">
<!-- <text class="iconfont icon-pinglun"></text> -->
<!-- <u-icon name="chat" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png" mode=""></image>
<text class="count">{{ commentCount }}</text>
</view>
<view class="p-item margin50">
<!-- <text class="iconfont icon-pinglun"></text> -->
<view class="" v-if="!isFavorite" @click.stop="cancelFavorite('取消收藏')">
<!-- <u-icon name="star" size="40rpx"></u-icon> -->
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onFavorite.png" mode=""></image>
</view>
<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noFavorite.png" mode=""></image>
</view>
<text class="count">{{ favoriteCount }}</text>
</view>
</view>
<u-line></u-line>
</view>
</view>
</view>
</template>
<script setup>
@ -378,7 +548,10 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
console.log('点赞')
isFavorite.value = !isFavorite.value
}
function swiperChange(item){
console.log(item)
viewIndex.value=item.detail.current
}
function cancelFavorite() {
console.log('点赞')
isFavorite.value = !isFavorite.value
@ -389,28 +562,60 @@ color: #1B1B1B 100%;">{{ postsousuotype }}</text>
<style lang="scss" scoped>
.top-plus {
padding: 10px 0px;
// padding: 10px 0px;
padding-bottom: 38rpx;
}
// .top {
// // height: 230rpx;
// padding-top: 90rpx;
// padding-bottom: 20rpx;
// display: grid;
// // justify-content: space-between;
// grid-template-columns: 1fr 1fr 1fr 6fr;
// align-items: center;
// }
.top {
// height: 230rpx;
padding-top: 90rpx;
padding-bottom: 20rpx;
display: grid;
// justify-content: space-between;
grid-template-columns: 1fr 1fr 1fr 6fr;
align-items: center;
padding-top: 88rpx;
padding-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
height: 180rpx;
}
.top-left {
height: 290rpx;
position: absolute;
display: flex; /* 使用 flex 布局 */
align-items: center; /* 垂直居中 */
justify-content: center;
left: 50rpx;
}
.top-center {
width: 100%;
display: flex; /* 使用 flex 布局 */
align-items: center; /* 垂直居中 */
justify-content: center;
}
.top-right {
display: flex; /* 使用 flex 布局 */
align-items: center; /* 垂直居中 */
}
@media screen and (max-width:414px) {
.top {
padding-top: 40rpx;
padding-bottom: 20rpx;
// grid-template-columns: 1fr 1fr 3fr 2fr;
grid-template-columns: 1fr 1fr 1fr 6fr 2fr;
}
}
// @media screen and (max-width:414px) {
// .top {
// padding-top: 40rpx;
// padding-bottom: 20rpx;
// // grid-template-columns: 1fr 1fr 3fr 2fr;
// grid-template-columns: 1fr 1fr 1fr 6fr 2fr;
// }
// }
.modal {
display: flex;