图片上传开发。详情页面图片展示

This commit is contained in:
francis_fh
2025-12-04 17:18:45 +08:00
parent f7e20aa6a0
commit d564281671
5 changed files with 357 additions and 65 deletions

View File

@@ -1,15 +1,15 @@
<template>
<view class="container safe-area-top">
<view>
<!-- 自定义头部搜索框 -->
<view class="custom-header">
<view class="top">
<image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
<!-- <image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image> -->
<view class="search-box">
<uni-icons
class="iconsearch"
color="#666666"
type="search"
size="18"
@confirm="searchCollection"
></uni-icons>
<input
class="inputed"
@@ -200,61 +200,16 @@ function dataToImg(data) {
display: flex
flex-direction: column
background: #F4f4f4
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
.view-top{
display: flex;
justify-content: space-around
background: #FFFFFF;
.top-item{
padding: 6rpx 0 18rpx 0
}
.active{
color: #256BFA;
font-weight: 500;
position: relative;
}
.active::after{
position: absolute;
content: ''
left: calc(50% - 12rpx)
bottom: 10rpx
width: 24rpx
height: 6rpx
background: #256BFA
}
}
.main-content{
background: #FFFFFF
height: 100%
.content-top{
padding: 28rpx
display: flex
justify-content: space-between
align-items: center
.top-left{
font-weight: 600;
font-size: 36rpx;
color: #000000;
line-height: 42rpx;
}
}
.content-history{
padding: 0 28rpx;
display: flex
flex-wrap: wrap
.history-tag{
margin-right: 40rpx
margin-bottom: 20rpx
white-space: nowrap
font-weight: 400;
font-size: 28rpx;
color: #333333;
background: #F5F5F5;
border-radius: 12rpx 12rpx 12rpx 12rpx;
width: fit-content;
padding: 12rpx 20rpx
}
}
height: 100vh;
.custom-header {
background-color: #fff;
padding:0;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.top {
display: flex;
@@ -262,8 +217,6 @@ function dataToImg(data) {
justify-content: space-between
background-color: #fff;
padding: 20rpx 20rpx;
position: sticky;
top: 0
.btnback{
width: 60rpx;
height: 60rpx;
@@ -304,6 +257,45 @@ function dataToImg(data) {
color: #256BFA;
}
}
.main-content{
background: #FFFFFF
height: 100%
margin-top: 140rpx;
.content-top{
padding: 28rpx
display: flex
justify-content: space-between
align-items: center
.top-left{
font-weight: 600;
font-size: 36rpx;
color: #000000;
line-height: 42rpx;
}
}
.content-history{
padding: 0 28rpx;
display: flex
flex-wrap: wrap
.history-tag{
margin-right: 40rpx
margin-bottom: 20rpx
white-space: nowrap
font-weight: 400;
font-size: 28rpx;
color: #333333;
background: #F5F5F5;
border-radius: 12rpx 12rpx 12rpx 12rpx;
width: fit-content;
padding: 12rpx 20rpx
}
}
}
.Detailscroll-view{
flex: 1
overflow: hidden
margin-top: 140rpx;
}
}
.slot-item