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

571
pages/index.vue
View File

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