21.创建壁纸列表页面部署跳转路由
创建页面
/pages/wallpaper/piclist
uni-data-select下拉框 | uni-app官网
温故知新：
双向数据绑定，将
el-select
form.role_id
遍历
roles
22.使用grid网格布局做响应式结构新增壁纸页面
uni-row 布局-行 | uni-app官网
/common/custom.scss
/pages/wallpaper/picadd
<script setup>
</script>
<template>
<view class="picadd">
<custom-head-top>
<template #left>
新增壁纸
</template>
</custom-head-top>
<view class="main">
<view class="grid">
<view class="itembox pic" v-for="item in 7">
<view class="left">左图</view>
<view class="right">右字</view>
</view>
<view class="itembox add">
<!-- <uni-icons type="plusempty" size="40" color="#999"></uni-icons> -->
<view class="icon">+</view>
<view class="text">点击选择图片</view>
</view>
</view>
<view class="">
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.main {
padding: 20px;
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px;
.itembox {
background: #f8f8f8;
width: 100%;
min-height: 300px;
display: flex;
align-items: start;
padding: 20px;
.left {
width: 150px;
aspect-ratio: 9/20;
}
.right {
flex: 1;
margin-left: 20px;
}
}
itembox.pic {}
itembox.add {
display: :flex;
align-items: center;
justify-content: center;
flex-direction: colum;
color: #888;
cursor: pointer;
.icon {
font-size: 50px;
}
.text {
font-size: 20px;
padding-top: 20px;
}
}
.itembox:hover {
border-color: #efefef;
}
}
}
</style>基础样式
响应式
温故知新：
Element Plus 的栅格系统基于 Flexbox 实现，通过
el-row
el-col
lg:
md:
:lg="16"
≥1200px
:md="12"
≥992px
23.conic-gradient设置背景透明棋盘网格镂空效果
conic-gradient()
conic-gradient()
background: conic-gradient(#ccc 0 25%, #fff 25% 50%, #ccc 50% 75%, #fff 75%);
<template>
<view class="picadd">
<custom-head-top>
<template #left>
新增壁纸
</template>
</custom-head-top>
<view class="main">
<view class="grid">
<view class="itembox pic" v-for="item in 7">
<view class="left">
<image src="/static/logo.png" mode="aspectFit"></image>
<view class="mask">
<view class="icon">
<uni-icons type="compose" size="20" color="#fff"></uni-icons>
</view>
<view class="icon" @click="delImg">
<uni-icons type="trash" size="20" color="#fff"></uni-icons>
</view>
</view>
</view>
<view class="right">右字</view>
</view>
<view class="itembox add">
<!-- <uni-icons type="plusempty" size="40" color="#999"></uni-icons> -->
<view class="icon">+</view>
<view class="text">点击选择图片</view>
</view>
</view>
<view class="">
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.main {
padding: 20px;
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px;
.itembox {
background: #f8f8f8;
width: 100%;
min-height: 300px;
display: flex;
align-items: start;
padding: 20px;
.left {
width: 150px;
aspect-ratio: 9/20;
position: relative;
background: conic-gradient(#ccc 0 25%, #fff 25% 50%, #ccc 50% 75%, #fff 75%);
image {
width: 100%;
height: 100%;
}
.mask {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
.icon {
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
}
.right {
flex: 1;
margin-left: 20px;
}
}
itembox.pic {}
itembox.add {
display: :flex;
align-items: center;
justify-content: center;
flex-direction: colum;
color: #888;
cursor: pointer;
.icon {
font-size: 50px;
}
.text {
font-size: 20px;
padding-top: 20px;
}
}
.itembox:hover {
border-color: #e4e4e4;
}
}
}
</style>
完善右边文字部分
uni-rate 评分 | uni-app官网
Rate Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value/v-model | Number | 0 | 当前评分 |
| size | Number | 24 | 星星的大小 |
| allowHalf | Boolean | false | 是否展示半星 |
| touchable | Boolean | true | 是否支持滑动手势 |
温故知新：
Element Plus 的
el-table-column
el-rate
Rate 评分 | Element Plus
el-rate
| 属性 | 作用 | 说明 |
|---|---|---|
|
|
绑定评分值 |
此处绑定到 |
|
|
禁用评分交互 |
用户无法点击修改评分（仅展示）。 |
|
|
显示当前分数 |
默认在右侧显示数值（如 |
|
|
设置分数文本颜色 |
此处为橙色 ( |
24.展现评分标签等完成图片展示模块的布局
<template>
<view class="picadd">
<custom-head-top>
<template #left>
新增壁纸
</template>
</custom-head-top>
<view class="main">
<view class="grid">
<view class="itembox pic" v-for="item in 7">
<view class="close">x</view>
<view class="left">
<image src="/static/logo.png" mode="aspectFit"></image>
<view class="mask">
<view class="icon">
<uni-icons type="compose" size="20" color="#fff"></uni-icons>
</view>
<view class="icon" @click="delImg">
<uni-icons type="trash" size="20" color="#fff"></uni-icons>
</view>
</view>
</view>
<view class="right">
<view class="row">
<view class="lable">图片描述</view>
<uni-easyinput type="textarea" placeholder="请输入图片描述"></uni-easyinput>
</view>
<view class="row">
<view class="lable">评分</view>
<uni-rate :touchable="false" allow-half :size="30"></uni-rate>
</view>
<view class="row">
<view class="lable">标签</view>
<uni-easyinput placeholder="请输入标签名并回车确认"></uni-easyinput>
<view class="tabGroup">
<view class="tab" v-for="tab in 10">标签1</view>
</view>
</view>
<view class="row inline">
<view class="lable">是否展现</view>
<switch></switch>
</view>
</view>
</view>
<view class="itembox add">
<!-- <uni-icons type="plusempty" size="40" color="#999"></uni-icons> -->
<view class="icon">+</view>
<view class="text">点击选择图片</view>
</view>
</view>
<view class="">
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.main {
padding: 20px;
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px;
.itembox {
background: #f8f8f8;
width: 100%;
min-height: 300px;
display: flex;
align-items: start;
padding: 20px;
position: relative;
.close {
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
background-color: #E43D33;
color: #fff;
display: none;
align-items: center;
justify-content: center;
}
.left {
width: 150px;
/* 固定宽高比（9:20） */
aspect-ratio: 9/20;
position: relative;
background: conic-gradient(#ccc 0 25%, #fff 25% 50%, #ccc 50% 75%, #fff 75%);
image {
width: 100%;
height: 100%;
}
.mask {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
.icon {
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
}
.right {
flex: 1;
margin-left: 20px;
color: #666;
.row {
margin-bottom: 20px;
.lable {
margin-bottom: 6px;
font-size: 14px;
}
.tabGroup {
display: flex;
padding-top: 6px;
/* 允许换行 */
flex-wrap: wrap;
/* 标签间距 */
gap: 6px;
.tab {
border: 1px solid #1A73e8;
border-radius: 100px;
color: #1A73e8;
font-size: 12px;
padding: 2px 6px;
cursor: pointer;
}
.tab:hover {
/* 悬停时标签下划线 */
text-decoration: line;
}
}
&inline {
display: flex;
align-items: center;
gap: 10px;
.lable {
margin-bottom: 0;
}
}
}
}
}
.itembox.add {
display: :flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #888;
cursor: pointer;
.icon {
font-size: 50px;
}
.text {
font-size: 20px;
padding-top: 20px;
}
}
.itembox:hover {
/* 悬停时边框颜色变化 */
border-color: #e4e4e4;
/* 悬停时显示关闭按钮 */
.close {
display: flex;
}
}
}
}
</style>
25.从本地选择图片将字段进行处理展现到顶面中
选择图片
方法
选择9张图片后，不显示添加图片按钮
温故知新：
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
