add
This commit is contained in:
parent
006041fca6
commit
63a0a9194e
22
pages.json
22
pages.json
|
|
@ -1549,7 +1549,29 @@
|
|||
"navigationBarTitleText": "发布商品",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "addGoodDetail/goodsType",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品分类",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "addGoodDetail/goodsAttr",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品属性",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "addGoodDetail/goodsPrice",
|
||||
"style": {
|
||||
"navigationBarTitleText": "价格与规格",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<view class='content'>
|
||||
|
||||
<u--form :model="model1" :rules="rules" ref="uForm" labelPosition="top"
|
||||
:labelStyle="{fontWeight:'bold',fontSize:'32rpx'}" labelWidth='100'>
|
||||
<u-form-item label="想卖什么" prop="userInfo.name" ref="item1">
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
</uni-section>
|
||||
</u-form-item>
|
||||
<view class="footer">
|
||||
<view class="footer-top">
|
||||
<view class="footer-top" @click='goDetail'>
|
||||
<text style="margin: 0 auto;">
|
||||
显示全部<u-icon style="display: inline-block;font-weight: bold;" color="$uni-newTheme-color"
|
||||
name="arrow-right"></u-icon>
|
||||
|
|
@ -33,10 +34,14 @@
|
|||
</view>
|
||||
|
||||
<view class="submit-btn">
|
||||
<u-button text="立即发布获取订单" @click='goDetail' :class="{height:'200px'}" color="#33BB3C"></u-button>
|
||||
<u-button text="立即发布获取订单" :class="{height:'200px'}" color="#33BB3C"></u-button>
|
||||
</view>
|
||||
</u--form>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -104,12 +109,18 @@
|
|||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
@font-face {
|
||||
font-family: PingFangFamily;
|
||||
src: url('/static/font/PingFangMedium.ttf');
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
font-family: PingFangFamily;
|
||||
|
||||
.borders {
|
||||
width: 690rpx;
|
||||
|
|
|
|||
|
|
@ -2,21 +2,87 @@
|
|||
<view class='content'>
|
||||
|
||||
<u--form :model="model1" :rules="rules" ref="uForm" labelPosition="top"
|
||||
:labelStyle="{fontSize:'32rpx',color:'#444444'}" labelWidth='100'>
|
||||
:labelStyle="{fontSize:'32rpx',color:'#444444'}" labelWidth='120'>
|
||||
<view class="good-baseInfo">
|
||||
<u-form-item label="商品标题" prop="userInfo.name" ref="item1">
|
||||
|
||||
<u--input placeholder="建议描述产品品牌、名称" v-model="text"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item class='formItem' label="商品主图" prop="userInfo.name" ref="item1">
|
||||
<view class="">
|
||||
<view style="color: #E18C34;font-size: 24rpx;margin-bottom: 30rpx;">
|
||||
上传时应注重真实性、清晰度
|
||||
</view>
|
||||
<view class="">
|
||||
<uploadImgVideo />
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="商品细节图" prop="userInfo.name" ref="item1">
|
||||
<view class="">
|
||||
<view style="color: #E18C34;font-size: 24rpx;margin-bottom: 30rpx;">
|
||||
请上传突出商品卖点细节图片
|
||||
</view>
|
||||
<view class="">
|
||||
<uploadImgVideo />
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class='tips'>
|
||||
商品图片上传时应注重真实性、清晰度和美观性，在平台上的展示效果至关重要。确保商品能够得到有效的展示和推广。
|
||||
</view>
|
||||
<view class="label-cls">
|
||||
<u-form-item label="商品分类" prop="userInfo.name" ref="item1" labelPosition="left">
|
||||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||||
@click="navgo('/pages/product/addGoodDetail/goodsType')">
|
||||
<view style="margin-right: 10rpx;line-height: 25rpx;">请选择</view>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="商品属性" prop="userInfo.name" ref="item1" labelPosition="left">
|
||||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||||
@click="navgo('/pages/product/addGoodDetail/goodsAttr')">
|
||||
<view style="margin-right: 10rpx;line-height: 25rpx;">去设置</view>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="description">
|
||||
规格与价格
|
||||
</view>
|
||||
<view class="label-cls">
|
||||
<u-form-item label="规格与价格" prop="userInfo.name" ref="item1" labelPosition="left">
|
||||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||||
@click="navgo('/pages/product/addGoodDetail/goodsPrice')">
|
||||
<view style="margin-right: 10rpx;line-height: 25rpx;">请设置</view>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="description">
|
||||
服务与承诺
|
||||
</view>
|
||||
<view class="label-cls">
|
||||
<u-form-item label="商品详细描述" prop="userInfo.name" ref="item1">
|
||||
<u--textarea v-model="value1" placeholder="货品描述请严格遵循《广告法》规定，避免出
|
||||
现虚假宣传和误导消费者的词语" count border="bottom" style="background-color:#F1F1F1;border-radius: 20rpx;"></u--textarea>
|
||||
</u-form-item>
|
||||
<u-line color="#F3F3F3"></u-line>
|
||||
<u-form-item label="送货方式" labelPosition="left">
|
||||
<u-checkbox-group v-model="checkboxValue1" placement="row" slot="right">
|
||||
<u-checkbox shape="circle" v-for="(item, index) in checkboxList1" :key="index"
|
||||
:label="item.name" :name="item.name" activeColor="#20B128"
|
||||
:customStyle="{marginRight: '8px'}"
|
||||
:labelColor="checkboxValue1.includes(item.name)?'#20B128':'#777777'">
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
</u--form>
|
||||
|
||||
<view class="submit-btn">
|
||||
<u-button type="primary" shape="circle" text="确认发布"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -49,7 +115,17 @@
|
|||
},
|
||||
],
|
||||
text: "",
|
||||
text1: "",
|
||||
value1: "",
|
||||
checkboxValue1: [],
|
||||
checkboxList1: [{
|
||||
name: '到店核销',
|
||||
},
|
||||
{
|
||||
name: '快递配送',
|
||||
},
|
||||
|
||||
],
|
||||
rules: {
|
||||
// 'userInfo.name': {
|
||||
// type: 'string',
|
||||
|
|
@ -74,6 +150,11 @@
|
|||
this.model1.userInfo.sex = e.name
|
||||
this.$refs.uForm.validateField('userInfo.sex')
|
||||
},
|
||||
navgo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -86,14 +167,45 @@
|
|||
min-height: 100vh;
|
||||
background-color: #F1F1F1;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding-bottom: 280rpx;
|
||||
font-family: PingFangFamily;
|
||||
|
||||
|
||||
.good-baseInfo {
|
||||
background-color: white;
|
||||
padding: 30rpx;
|
||||
padding: 30rpx 30rpx 10rpx 30rpx;
|
||||
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #E18C34;
|
||||
font-size: 24rpx;
|
||||
background-color: #FFF1E9;
|
||||
padding: 26rpx 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.label-cls {
|
||||
background-color: white;
|
||||
padding: 8rpx 30rpx;
|
||||
}
|
||||
|
||||
.description {
|
||||
background-color: #F1F1F1;
|
||||
padding: 30rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
position: fixed;
|
||||
bottom: 86rpx;
|
||||
width: 750rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: white;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 0.2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,382 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<u--form :model="model1" :rules="rules" ref="uForm" labelPosition="left"
|
||||
:labelStyle="{fontSize:'32rpx',color:'#444444'}" labelWidth='120' borderBottom>
|
||||
|
||||
<view class="description">
|
||||
产品属性
|
||||
</view>
|
||||
<view class="label-cls">
|
||||
<u-form-item label="产地" prop="userInfo.name" ref="item1">
|
||||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||||
@click="showPouple=true,popType='place'">
|
||||
<view style="margin-right: 10rpx;line-height: 25rpx;">请选择</view>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="商品等级" prop="userInfo.name" ref="item1">
|
||||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||||
@click="showPouple=true,popType='leval'">
|
||||
<view style="margin-right: 10rpx;line-height: 25rpx;">请选择</view>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="货品包装" prop="userInfo.name" ref="item1">
|
||||
<view style="display: flex;align-items: center;font-size: 28rpx;color:#777777 ;" slot="right"
|
||||
@click="showPouple=true,popType='packing'">
|
||||
<view style="margin-right: 10rpx;line-height: 25rpx;">请选择</view>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="description" style="display: flex;justify-content: space-between;align-items: center">
|
||||
<text>产品属性</text>
|
||||
<view class="attr-custom">
|
||||
<u-icon name="plus" color='#20B128' style="margin-right: 8rpx;font-weight: bold;"></u-icon> 自定义
|
||||
</view>
|
||||
</view>
|
||||
<view class="label-cls"
|
||||
style="display: flex;padding: 20rpx 20rpx 20rpx 2rpx;justify-content: space-between;">
|
||||
<view class="" style="display: flex;width: 70%;align-items: center;">
|
||||
<u--input placeholder="请填写属性名称" border="surround" v-model="value"></u--input>
|
||||
<u-line direction="col" length="40rpx" color="#CECECE"></u-line>
|
||||
<u--input placeholder="请填写属性值" border="surround" v-model="value"></u--input>
|
||||
<u-line direction="col" length="40rpx" color="#CECECE"></u-line>
|
||||
</view>
|
||||
<view style="color: #777777;display: flex; align-items: center;">
|
||||
<u-icon name="trash" style='margin-right: 8rpx;'></u-icon> 删除
|
||||
</view>
|
||||
</view>
|
||||
</u--form>
|
||||
<view class="submit-btn">
|
||||
<u-button type="primary" shape="circle" text="保存"></u-button>
|
||||
</view>
|
||||
|
||||
|
||||
<u-popup :show="showPouple" @close="showPouple=false" @open="showPouple=true" :round="10">
|
||||
<view class="RegularFont" style="padding: 42rpx 40rpx">
|
||||
<view class="pop-head">
|
||||
<text>取消</text>
|
||||
<text style="font-size:32rpx ;color:#333333 ;">商品产地</text>
|
||||
<text>确定</text>
|
||||
</view>
|
||||
<!-- 地区 -->
|
||||
<view v-if="popType=='place'">
|
||||
<view class="Positioning " style="color: #989898;margin-bottom: 30rpx;">
|
||||
<view class="" style="display: flex;">
|
||||
<u-icon name="map" style='margin-right: 8rpx;'></u-icon>
|
||||
<text>四川得分手段解决客户</text>
|
||||
</view>
|
||||
<view class="">
|
||||
刷新定位
|
||||
</view>
|
||||
</view>
|
||||
<u-line color="#CECECE"></u-line>
|
||||
<view class="province">
|
||||
<view class="province-li" @click='positionType=0'
|
||||
:style="{color:positionType==0?'#20B128':'#707070'} ">
|
||||
四川省
|
||||
</view>
|
||||
<view class="province-li" @click='positionType=1'
|
||||
:style="{color:positionType==1?'#20B128':'#707070'} ">
|
||||
泸州市
|
||||
</view>
|
||||
<view class="province-li" @click='positionType=2'
|
||||
:style="{color:positionType==2?'#20B128':'#707070'} ">
|
||||
牛马谭
|
||||
</view>
|
||||
<view class="province-line" :style="{left:positionType*130+30+'rpx'}" />
|
||||
</view>
|
||||
<u-line color="#CECECE"></u-line>
|
||||
<view class="" style="color:#989898;font-size:24rpx ;margin-top: 40rpx;">
|
||||
请选择省份
|
||||
</view>
|
||||
<view class="position-content">
|
||||
<view class="position-li" v-for="item in 20">
|
||||
<text>
|
||||
四川省
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 地区结束 -->
|
||||
|
||||
<!-- 商品等级 -->
|
||||
<view v-if="popType=='leval'" style="height: 500rpx;">
|
||||
<u-transition :show="show" mode="slide-right">
|
||||
<view class="goods-leval" v-show="show">
|
||||
<view class="goods-leval-li" v-for='item in 10'>
|
||||
一等平
|
||||
</view>
|
||||
<view class="goods-leval-li act">
|
||||
二等平
|
||||
</view>
|
||||
<view class="goods-leval-li " style="display: flex;color:#38BE41 ;">
|
||||
<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'
|
||||
@click="show=!show"></u-icon> 自定义
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
<u-transition :show="!show" mode="slide-left">
|
||||
<view class="transition" @click="show=!show">
|
||||
<!-- 大师傅士大夫士大夫撒旦 -->
|
||||
<u--textarea v-model="value1" placeholder="请输入商品等级"></u--textarea>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
<!-- 商品等级结束 -->
|
||||
|
||||
<!-- 商品包装 -->
|
||||
<view v-if="popType=='packing'" style="height: 500rpx;">
|
||||
<u-transition :show="show" mode="slide-right">
|
||||
<view class="goods-leval">
|
||||
<view class="goods-leval-li" v-for='item in 10'>
|
||||
纸箱子
|
||||
</view>
|
||||
<view class="goods-leval-li act">
|
||||
木箱子
|
||||
</view>
|
||||
<view class="goods-leval-li " style="display: flex;color:#38BE41 ;" @click="show=!show">
|
||||
<u-icon name="plus" color="#38BE41" style='margin-right: 8rpx;'></u-icon> 自定义
|
||||
</view>
|
||||
</view>
|
||||
</u-transition>
|
||||
<u-transition :show="!show" mode="slide-left">
|
||||
<view class="transition" @click="show=!show">
|
||||
<u--textarea v-model="value1" placeholder="请输入商品等级"></u--textarea>
|
||||
</view>
|
||||
</u-transition>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
popType: 'leval',
|
||||
showPouple: true,
|
||||
showSex: false,
|
||||
positionType: 0,
|
||||
model1: {
|
||||
userInfo: {
|
||||
name: '',
|
||||
sex: '',
|
||||
},
|
||||
},
|
||||
value1: "",
|
||||
value: '',
|
||||
range: [{
|
||||
value: 0,
|
||||
text: "篮球"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "足球"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "游泳"
|
||||
},
|
||||
],
|
||||
text: "",
|
||||
text1: "",
|
||||
value1: "",
|
||||
checkboxValue1: [],
|
||||
checkboxList1: [{
|
||||
name: '到店核销',
|
||||
},
|
||||
{
|
||||
name: '快递配送',
|
||||
},
|
||||
|
||||
],
|
||||
rules: {
|
||||
// 'userInfo.name': {
|
||||
// type: 'string',
|
||||
// required: true,
|
||||
// message: '请填写姓名',
|
||||
// trigger: ['blur', 'change']
|
||||
// },
|
||||
// 'userInfo.sex': {
|
||||
// type: 'string',
|
||||
// max: 1,
|
||||
// required: true,
|
||||
// message: '请选择男或女',
|
||||
// trigger: ['blur', 'change']
|
||||
// },
|
||||
},
|
||||
radio: '',
|
||||
switchVal: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
sexSelect(e) {
|
||||
this.model1.userInfo.sex = e.name
|
||||
this.$refs.uForm.validateField('userInfo.sex')
|
||||
},
|
||||
navgo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
getLocation() {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// this.getLocation()
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.MediumFont {
|
||||
font-family: PingFangFamily;
|
||||
}
|
||||
|
||||
.RegularFont {
|
||||
font-family: PingFangRegular;
|
||||
}
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
background-color: #F1F1F1;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangFamily;
|
||||
}
|
||||
|
||||
.label-cls {
|
||||
background-color: white;
|
||||
padding: 8rpx 30rpx;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
}
|
||||
|
||||
.description {
|
||||
background-color: #F1F1F1;
|
||||
padding: 30rpx 0rpx;
|
||||
font-size: 28rpx;
|
||||
color: #777777;
|
||||
width: 690rpx;
|
||||
}
|
||||
|
||||
.attr-custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #38BE41;
|
||||
background-color: #E0EFE1;
|
||||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||||
padding: 7rpx 10rpx;
|
||||
color: #20B128;
|
||||
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
position: fixed;
|
||||
bottom: 50rpx;
|
||||
width: 670rpx;
|
||||
}
|
||||
|
||||
.pop-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #20B128;
|
||||
margin-bottom: 42rpx;
|
||||
}
|
||||
|
||||
.Positioning {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.province {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.province-li {
|
||||
color: #707070;
|
||||
font-size: 32rpx;
|
||||
margin: 30rpx 40rpx 30rpx 0;
|
||||
}
|
||||
|
||||
.province-line {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 40rpx;
|
||||
background-color: #20B128;
|
||||
bottom: 20rpx;
|
||||
left: 30rpx;
|
||||
transition: 500ms;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.position-content {
|
||||
height: 600rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.position-li {
|
||||
font-size: 28rpx;
|
||||
color: #707070;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-leval {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
overflow-y: auto;
|
||||
|
||||
.goods-leval-li {
|
||||
margin-right: 20rpx;
|
||||
padding: 10rpx 40rpx;
|
||||
height: 60rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||||
background-color: #F1F1F1;
|
||||
}
|
||||
|
||||
.act {
|
||||
color: #20B128;
|
||||
background-color: #E8F7E9;
|
||||
border: 1px solid #20B128;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* .toast {
|
||||
position: absolute;
|
||||
color: white;
|
||||
background-color: #20B128;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
|
||||
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<u-button icon="plus" text="新增规格" class="custom-style" iconColor='#38BE41'></u-button>
|
||||
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
规格1
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.custom-style {
|
||||
color: $uni-newTheme-color;
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
background-color: #F1F1F1;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangFamily;
|
||||
|
||||
.card {
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx 46rpx;
|
||||
background-color: white;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.card-head::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
font-size: 32rpx;
|
||||
left: 10rpx;
|
||||
width: 2rpx;
|
||||
height: 32rpx;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="lines" :style="{top:(actIndex*82)+30+'rpx'}" />
|
||||
<view class="left">
|
||||
<view class="left-li" v-for="(item,index) in 100" :class="actIndex==index?'act-li':''"
|
||||
@click="actIndex=index">
|
||||
常用分类
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-line direction="col" color="#ECECEC"></u-line>
|
||||
</view>
|
||||
<view class="right">
|
||||
<u-search :showAction="true" v-model="keyword" actionText="搜索" :animation="true"></u-search>
|
||||
<view style="margin: 30rpx 0;font-size: 28rpx; color: #989898;">
|
||||
可能在找
|
||||
</view>
|
||||
<view class="right-content">
|
||||
<view class="right-content-li" v-for='item in 20'>
|
||||
可能在找
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
actIndex: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.content {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
background-color: white;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
font-family: PingFangFamily;
|
||||
|
||||
.lines {
|
||||
height: 38rpx;
|
||||
border-radius: 5px;
|
||||
width: 3px;
|
||||
background-color: #40AE36;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
transition: 200ms;
|
||||
top: 33rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-right: 30rpx;
|
||||
width: 140rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.left-li {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #444444;
|
||||
height: 82rpx;
|
||||
}
|
||||
|
||||
.act-li {
|
||||
color: $uni-newTheme-color;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 0 20rpx;
|
||||
position: fixed;
|
||||
width: 530rpx;
|
||||
left: 220rpx;
|
||||
|
||||
.right-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.right-content-li {
|
||||
color: #444444;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
border: 2rpx solid #989898;
|
||||
padding: 16rpx 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +1,86 @@
|
|||
@charset "UTF-8";
|
||||
* {scrollbar-color: #e5e5e5 #f7f7f9;scrollbar-width: thin;}
|
||||
html {margin: 0 auto;max-width: 1200px;}
|
||||
body {overflow-x: hidden;}
|
||||
.font-color,.font-color-red {color:#fc4141!important}
|
||||
.bg-color{background-color:#e93323!important}
|
||||
.icon-color{color: #ff3c2b}
|
||||
.cart-color {color: #ff3700 !important;border:1px solid #ff3700 !important}
|
||||
.padding20{padding: 20rpx}
|
||||
.pad20 {padding: 0 20rpx}
|
||||
.padding30{padding: 30rpx}
|
||||
.pad30{padding: 0 30rpx}
|
||||
.pull-left{float: left;}
|
||||
.pull-right{float: right;}
|
||||
.clearfix:after{content:'';display:block;height:0;clear:both}
|
||||
.clearfix{zoom:1}
|
||||
.acea-row {display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-lines: multiple;
|
||||
-moz-box-lines:multiple;-o-box-lines:multiple;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
|
||||
|
||||
* {
|
||||
scrollbar-color: #e5e5e5 #f7f7f9;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.font-color,
|
||||
.font-color-red {
|
||||
color: #fc4141 !important
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: #e93323 !important
|
||||
}
|
||||
|
||||
.icon-color {
|
||||
color: #ff3c2b
|
||||
}
|
||||
|
||||
.cart-color {
|
||||
color: #ff3700 !important;
|
||||
border: 1px solid #ff3700 !important
|
||||
}
|
||||
|
||||
.padding20 {
|
||||
padding: 20rpx
|
||||
}
|
||||
|
||||
.pad20 {
|
||||
padding: 0 20rpx
|
||||
}
|
||||
|
||||
.padding30 {
|
||||
padding: 30rpx
|
||||
}
|
||||
|
||||
.pad30 {
|
||||
padding: 0 30rpx
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1
|
||||
}
|
||||
|
||||
.acea-row {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-lines: multiple;
|
||||
-moz-box-lines: multiple;
|
||||
-o-box-lines: multiple;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.acea-row.row-middle {
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
|
|
@ -24,6 +89,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-align-items: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.acea-row.row-top {
|
||||
-webkit-box-align: start;
|
||||
-moz-box-align: start;
|
||||
|
|
@ -32,6 +98,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start
|
||||
}
|
||||
|
||||
.acea-row.row-bottom {
|
||||
-webkit-box-align: end;
|
||||
-moz-box-align: end;
|
||||
|
|
@ -40,6 +107,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end
|
||||
}
|
||||
|
||||
.acea-row.row-center {
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
|
|
@ -48,6 +116,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-justify-content: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.acea-row.row-right {
|
||||
-webkit-box-pack: end;
|
||||
-moz-box-pack: end;
|
||||
|
|
@ -56,6 +125,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.acea-row.row-left {
|
||||
-webkit-box-pack: start;
|
||||
-moz-box-pack: start;
|
||||
|
|
@ -64,6 +134,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start
|
||||
}
|
||||
|
||||
.acea-row.row-between {
|
||||
-webkit-box-pack: justify;
|
||||
-moz-box-pack: justify;
|
||||
|
|
@ -72,10 +143,12 @@ body {overflow-x: hidden;}
|
|||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.acea-row.row-around {
|
||||
justify-content: space-around;
|
||||
-webkit-justify-content: space-around
|
||||
}
|
||||
|
||||
.acea-row.row-column-around {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
|
|
@ -83,6 +156,7 @@ body {overflow-x: hidden;}
|
|||
justify-content: space-around;
|
||||
-webkit-justify-content: space-around
|
||||
}
|
||||
|
||||
.acea-row.row-column {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
|
|
@ -91,6 +165,7 @@ body {overflow-x: hidden;}
|
|||
-ms-flex-direction: column;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.acea-row.row-column-between {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
|
|
@ -105,6 +180,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.acea-row.row-center-wrapper {
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
|
|
@ -119,6 +195,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-justify-content: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.acea-row.row-between-wrapper {
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
|
|
@ -133,6 +210,7 @@ body {overflow-x: hidden;}
|
|||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.start {
|
||||
width: 122rpx;
|
||||
height: 30rpx;
|
||||
|
|
@ -140,49 +218,172 @@ body {overflow-x: hidden;}
|
|||
background-repeat: no-repeat;
|
||||
background-size: 122rpx auto;
|
||||
}
|
||||
.start.star5{background-position:0 3rpx;}
|
||||
.start.star4{background-position:0 -30rpx;}
|
||||
.start.star3{background-position:0 -70rpx;}
|
||||
.start.star2{background-position:0 -105rpx;}
|
||||
.start.star1{background-position:0 -140rpx;}
|
||||
.start.star0{background-position:0 -175rpx;}
|
||||
*{box-sizing:border-box}
|
||||
page{font-size: 28rpx;background-color:#f5f5f5;color: #333}
|
||||
body,html{height:unset}
|
||||
button{padding:0;margin:0;line-height:normal;background-color:#fff}
|
||||
button::after {border:0}
|
||||
radio .wx-radio-input {border-radius:50%;width:38rpx;height:38rpx}
|
||||
radio .wx-radio-input.wx-radio-input-checked{border:1px solid #e93323;background-color:#e93323;}
|
||||
radio .uni-radio-input{border-radius:50%;width:38rpx;height:38rpx}
|
||||
radio .uni-radio-input.uni-radio-input-checked{border: 1px solid #e93323;background-color: #e93323;}
|
||||
checkbox .wx-checkbox-input{width:38rpx;height:38rpx}
|
||||
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{color: #fff!important;}
|
||||
checkbox .uni-checkbox-input{width: 38rpx;height: 38rpx}
|
||||
|
||||
.start.star5 {
|
||||
background-position: 0 3rpx;
|
||||
}
|
||||
|
||||
.start.star4 {
|
||||
background-position: 0 -30rpx;
|
||||
}
|
||||
|
||||
.start.star3 {
|
||||
background-position: 0 -70rpx;
|
||||
}
|
||||
|
||||
.start.star2 {
|
||||
background-position: 0 -105rpx;
|
||||
}
|
||||
|
||||
.start.star1 {
|
||||
background-position: 0 -140rpx;
|
||||
}
|
||||
|
||||
.start.star0 {
|
||||
background-position: 0 -175rpx;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
page {
|
||||
font-size: 28rpx;
|
||||
background-color: #f5f5f5;
|
||||
color: #333
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: unset
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: 0
|
||||
}
|
||||
|
||||
radio .wx-radio-input {
|
||||
border-radius: 50%;
|
||||
width: 38rpx;
|
||||
height: 38rpx
|
||||
}
|
||||
|
||||
radio .wx-radio-input.wx-radio-input-checked {
|
||||
border: 1px solid #e93323;
|
||||
background-color: #e93323;
|
||||
}
|
||||
|
||||
radio .uni-radio-input {
|
||||
border-radius: 50%;
|
||||
width: 38rpx;
|
||||
height: 38rpx
|
||||
}
|
||||
|
||||
radio .uni-radio-input.uni-radio-input-checked {
|
||||
border: 1px solid #e93323;
|
||||
background-color: #e93323;
|
||||
}
|
||||
|
||||
checkbox .wx-checkbox-input {
|
||||
width: 38rpx;
|
||||
height: 38rpx
|
||||
}
|
||||
|
||||
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
checkbox .uni-checkbox-input {
|
||||
width: 38rpx;
|
||||
height: 38rpx
|
||||
}
|
||||
|
||||
checkbox .uni-checkbox-input.uni-checkbox-input-checked,
|
||||
checkbox .wx-checkbox-input.wx-checkbox-input-checked{border:1px solid #e93323!important;background-color:#e93323!important;color:#fff!important;}
|
||||
checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{font-size: 35rpx}
|
||||
.line1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.line2{word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}
|
||||
.mask{position:fixed;top: 0;left:0;right:0;bottom:0;background-color:#000;opacity:.5;z-index:30}
|
||||
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
border: 1px solid #e93323 !important;
|
||||
background-color: #e93323 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
|
||||
font-size: 35rpx
|
||||
}
|
||||
|
||||
.line1 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.line2 {
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
opacity: .5;
|
||||
z-index: 30
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
from {
|
||||
transform: rotate(0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes load {
|
||||
from {
|
||||
transform: rotate(0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
.loadingpic{animation:load 3s linear 1s infinite;--webkit-animation:load 3s linear 1s infinite}
|
||||
.loading-list{animation:load linear 1s infinite;-webkit-animation:load linear 1s infinite;font-size:40rpx;margin-right:22rpx}
|
||||
.loading{width:100%;height:100rpx;line-height:100rpx;align-items:center;justify-content:center;position:relative;text-align:center}
|
||||
|
||||
.loadingpic {
|
||||
animation: load 3s linear 1s infinite;
|
||||
--webkit-animation: load 3s linear 1s infinite
|
||||
}
|
||||
|
||||
.loading-list {
|
||||
animation: load linear 1s infinite;
|
||||
-webkit-animation: load linear 1s infinite;
|
||||
font-size: 40rpx;
|
||||
margin-right: 22rpx
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.loading .line {
|
||||
position: absolute;
|
||||
width: 450rpx;
|
||||
|
|
@ -191,6 +392,7 @@ checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{font-size: 35rpx
|
|||
height: 1px;
|
||||
border-top: 1px solid #eee
|
||||
}
|
||||
|
||||
.loading .text {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -199,13 +401,25 @@ checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{font-size: 35rpx
|
|||
z-index: 2;
|
||||
color: #777
|
||||
}
|
||||
|
||||
.loadingicon .loading {
|
||||
animation: load linear 1s infinite;
|
||||
font-size: 45rpx;
|
||||
color: #000
|
||||
}
|
||||
|
||||
.loadingicon {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PingFangFamily;
|
||||
src: url('/static/font/PingFangMedium.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PingFangRegular;
|
||||
src: url('/static/font/PingFangRegular.ttf');
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
|
||||
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
|
||||
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
|
||||
|
||||
$u-main-color: #303133;
|
||||
$u-content-color: #606266;
|
||||
$u-tips-color: #909193;
|
||||
$u-light-color: #c0c4cc;
|
||||
$u-border-color: #dadbde;
|
||||
$u-bg-color: #f3f4f6;
|
||||
$u-disabled-color: #c8c9cc;
|
||||
|
||||
$u-primary: #32BB3B;
|
||||
$u-primary-dark: #398ade;
|
||||
$u-primary-disabled: #9acafc;
|
||||
$u-primary-light: #ecf5ff;
|
||||
|
||||
$u-warning: #f9ae3d;
|
||||
$u-warning-dark: #f1a532;
|
||||
$u-warning-disabled: #f9d39b;
|
||||
$u-warning-light: #fdf6ec;
|
||||
|
||||
$u-success: #5ac725;
|
||||
$u-success-dark: #53c21d;
|
||||
$u-success-disabled: #a9e08f;
|
||||
$u-success-light: #f5fff0;
|
||||
|
||||
$u-error: #f56c6c;
|
||||
$u-error-dark: #e45656;
|
||||
$u-error-disabled: #f7b2b2;
|
||||
$u-error-light: #fef0f0;
|
||||
|
||||
$u-info: #909399;
|
||||
$u-info-dark: #767a82;
|
||||
$u-info-disabled: #c4c6c9;
|
||||
$u-info-light: #f4f4f5;
|
||||
|
||||
// scss混入，为了少写几行#ifndef
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
2
uni.scss
2
uni.scss
|
|
@ -11,7 +11,7 @@
|
|||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
@import '@/uni_modules/uview-ui/theme.scss';
|
||||
@import '@/static/css/theme.scss';
|
||||
/* 颜色变量 */
|
||||
$uni-theme-color: #f45846;
|
||||
$uni-newTheme-color: #38BE41;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $u-border-color: #dadbde;
|
|||
$u-bg-color: #f3f4f6;
|
||||
$u-disabled-color: #c8c9cc;
|
||||
|
||||
$u-primary: #3c9cff;
|
||||
$u-primary: #32BB3B;
|
||||
$u-primary-dark: #398ade;
|
||||
$u-primary-disabled: #9acafc;
|
||||
$u-primary-light: #ecf5ff;
|
||||
|
|
|
|||
Loading…
Reference in New Issue