Compare commits

...

2 Commits

Author SHA1 Message Date
Your Name b9f38708bf 接单顶部布局完成 10 months ago
Your Name 92246839c8 下单页完成 10 months ago
  1. 128
      assets/scss/checkbox.scss
  2. 48
      assets/scss/element/index.scss
  3. 39
      components/layoutHeader.vue
  4. 497
      pages/homeIndex/placeOrder.vue
  5. 224
      pages/homeIndex/receivingorders.vue

@ -1,66 +1,66 @@
// /* 单选框和多选框 */
// .checkbox-wrapper {
// position: relative;
// input {
// display: none;
// }
// .icon {
// position: relative;
// left: 0px;
// top: 7px;
// display: inline-block;
// width: 13px;
// height: 13px;
// border: 1px solid #cccccc;
// border-radius: 50%;
// -webkit-transform: translate(0, -50%);
// -moz-transform: translate(0, -50%);
// -o-transform: translate(0, -50%);
// -ms-transform: translate(0, -50%);
// transform: translate(0, -50%);
// }
// input:checked + .icon {
// background-color: #e93323;
// border-color: #e93323;
// background-image: url("../images/enter.png");
// -webkit-background-size: 10px 8px;
// -moz-background-size: 10px 8px;
// background-size: 10px 8px;
// background-repeat: no-repeat;
// background-position: center center;
// }
// }
/* 单选框和多选框 */
.checkbox-wrapper {
position: relative;
input {
display: none;
}
.icon {
position: relative;
left: 0px;
top: 7px;
display: inline-block;
width: 13px;
height: 13px;
border: 1px solid #cccccc;
border-radius: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
input:checked + .icon {
background-color: #e93323;
border-color: #e93323;
background-image: url("../images/enter.png");
-webkit-background-size: 10px 8px;
-moz-background-size: 10px 8px;
background-size: 10px 8px;
background-repeat: no-repeat;
background-position: center center;
}
}
// .Checkbox {
// position: absolute;
// visibility: hidden;
// outline: none;
// background: #fff;
// }
// .Checkbox+label {
// position:absolute;
// width: 16px;
// height: 16px;
// border: 1px solid #9B9B9B;
// border-radius: 50%;
// background-color:#fff;
// left: 11px;
// top: 50%;
// margin-top: -8px;
// }
// .Checkbox:checked+label:after {
// content: "";
// position: absolute;
// left: 3px;
// top:3px;
// width: 6px;
// height: 3px;
// border: 2px solid #9B9B9B;
// border-top-color: transparent;
// border-right-color: transparent;
// transform: rotate(-45deg);
// -ms-transform: rotate(-45deg);
// -moz-transform: rotate(-45deg);
// -webkit-transform: rotate(-45deg);
// }
.Checkbox {
position: absolute;
visibility: hidden;
outline: none;
background: #fff;
}
.Checkbox+label {
position:absolute;
width: 16px;
height: 16px;
border: 1px solid #9B9B9B;
border-radius: 50%;
background-color:#fff;
left: 11px;
top: 50%;
margin-top: -8px;
}
.Checkbox:checked+label:after {
content: "";
position: absolute;
left: 3px;
top:3px;
width: 6px;
height: 3px;
border: 2px solid #9B9B9B;
border-top-color: transparent;
border-right-color: transparent;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

@ -1,26 +1,26 @@
// $-colors: (
// 'primary': (
// 'base': #E93323,
// ),
// 'success': (
// 'base': #67c23a,
// ),
// 'warning': (
// 'base': #e6a23c,
// ),
// 'danger': (
// 'base': #f56c6c,
// ),
// 'error': (
// 'base': #E93323,
// ),
// 'info': (
// 'base': #909399,
// ),
// );
$-colors: (
'primary': (
'base': #FF94D4,
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #E93323,
),
'info': (
'base': #909399,
),
);
// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
// $colors: $-colors
// );
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: $-colors
);
// @use './dark.scss';
@use './dark.scss';

@ -3,14 +3,17 @@
<div class="nav">
<div class="menu">
<ul>
<li @click="goTo(1,'/')">首页</li>
<li @click="goTo(2,'homeIndex/placeOrder')">下订单</li>
<li @click="goTo(3)">接订单</li>
<li @click="goTo(4)">找花店</li>
<li @click="goTo(5)">花店地图</li>
<li @click="goTo(6)">服务中心</li>
<li @click="goTo(7)">下载中心</li>
<li ref="active" class="active"></li>
<li :class="active == 1 ? 'active' : ''" @click="goTo(1,'/')">首页 <div v-if="active == 1" class="active-border"></div> </li>
<li :class="active == 2 ? 'active' : ''" @click="goTo(2,'/homeIndex/placeOrder')">下订单 <div v-if="active == 2" class="active-border"></div></li>
<li :class="active == 3 ? 'active' : ''" @click="goTo(3,'/homeIndex/receivingorders')">接订单<div v-if="active == 3" class="active-border"></div></li>
<li :class="active == 4 ? 'active' : ''" @click="goTo(4)">找花店<div v-if="active == 4" class="active-border"></div></li>
<li :class="active == 5 ? 'active' : ''" @click="goTo(5)">花店地图<div v-if="active == 5" class="active-border"></div></li>
<li :class="active == 6 ? 'active' : ''" @click="goTo(6)">服务中心<div v-if="active == 6" class="active-border"></div></li>
<li :class="active == 7 ? 'active' : ''" @click="goTo(7)">下载中心<div v-if="active == 7" class="active-border"></div></li>
<!-- <li ref="active" class="active"></li> -->
<nuxt-link to="homeIndex/placeOrder" exact>
点击跳转到 About 页面
</nuxt-link>
</ul>
</div>
<div class="login-btn">
@ -28,14 +31,16 @@ import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import {linkNavigateTo} from '~/utils/util'
const userStore = useUserStore()
const active = ref(null)
const active = ref(sessionStorage.getItem('index') || 1)
const userLoginRef = shallowRef()
const goTo = async (index: number,url?:string) => {
await linkNavigateTo(url)
active.value = index
sessionStorage.setItem('index',index)
await linkNavigateTo(url)
// console.log(active.value.offsetWidth);
const width = active.value.offsetWidth
active.value.style.left = (index - 1) * width + 'px'
// const width = active.value.offsetWidth
// active.value.style.left = (index - 1) * width + 'px'
}
const login = () => {
@ -64,20 +69,27 @@ const handlerNuxtLink = async (url: string, type: number) => {
height: .5208rem;
background-color: #fff;
ul {
position: relative;
padding: 0;
margin: 0;
display: flex;
align-items: center;
height: 100%;
li {
position: relative;
font-size: .0833rem;
width: .4688rem;
list-style: none;
text-align: center;
cursor: pointer;
height:100%;
line-height:.5208rem;
}
.active {
color:#ff518f ;
// transition: width 5s linear 0s;
}
.active-border{
position: absolute;
bottom: 0;
left: 0;
@ -86,7 +98,6 @@ const handlerNuxtLink = async (url: string, type: number) => {
background: linear-gradient(270deg, #ffd4ac 0%, #ff94d4 53%, #ff518f 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
// transition: width 5s linear 0s;
}
}
.login-btn {

@ -15,21 +15,256 @@
<el-form :model="form" label-width="120px">
<el-form-item label="配送类型">
<el-radio-group v-model="radio1" size="large">
<el-radio-button label="配送" />
<el-radio-button label="自提" />
<el-radio-button border label="配送" />
<el-radio-button border label="自提" />
</el-radio-group>
</el-form-item>
<el-form-item label="配送类型">
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a date"
:default-value="new Date(2010, 9, 1)"
/>
<el-form-item label="收货时间" class="receipt-time">
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a date"
:default-value="new Date(2010, 9, 1)"
/>
<el-select v-model="value" class="m-2" placeholder="Select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div class="timing-receipt">定时配送</div>
</el-form-item>
<el-form-item label="收货区域" class="receipt-region">
<el-select v-model="value" class="m-2" placeholder="Select" style="width: 2.0833rem">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="定位地址" class="locate-address">
<el-input
style="width: 2.0833rem"
v-model="input"
placeholder="请选择你的定位信息"
maxlength="100"
show-word-limit
/>
</el-form-item>
<el-form-item label="门牌号" class="door-number">
<el-input
style="width: 2.0833rem"
v-model="input"
placeholder="详细地址,例如:3号楼2单元106"
maxlength="100"
show-word-limit
/>
</el-form-item>
<el-form-item label="" class="map">
<div class="dlaceholding"></div>
</el-form-item>
<el-form-item label="地址自动识别" class="map">
<el-input
style="width: 2.0833rem"
v-model="textarea"
:rows="2"
type="textarea"
placeholder="试试粘贴收货人姓名、手机号、收货地址、可快速识别您的收货信息"
/>
</el-form-item>
</el-form>
</div>
<div class="right">
<el-form :model="form" label-width="120px">
<el-form-item label="收货人姓名" class="locate-address">
<el-input
style="width: 2.0833rem"
v-model="input"
placeholder="请输入收货人姓名"
maxlength="100"
show-word-limit
/>
</el-form-item>
<el-form-item label="收货人电话" class="door-number">
<el-input
style="width: 2.0833rem"
v-model="input"
placeholder="请输入收货人电话号"
maxlength="100"
show-word-limit
/>
</el-form-item>
<el-form-item label="顶花人姓名" class="door-number">
<el-input
style="width: 2.0833rem"
v-model="input"
placeholder="请输入定花人电话"
maxlength="100"
show-word-limit
/>
</el-form-item>
<el-form-item label="贺卡" class="map">
<el-input
style="width: 2.0833rem"
v-model="textarea"
:rows="2"
type="textarea"
placeholder="请填写贺卡留言"
/>
</el-form-item>
<el-form-item label="订单备注" class="map">
<el-input
style="width: 2.0833rem"
v-model="textarea"
:rows="2"
type="textarea"
placeholder="订单备注,订单双方均可查看"
/>
</el-form-item>
</el-form>
</div>
</div>
</div>
<div class="order-information">
<div class="header">商品信息</div>
<div class="form">
<div class="left">
<el-form :model="form" label-width="120px">
<el-form-item label="上传商品图片" class="upload-image">
<el-upload limit="4" action="#" list-type="picture-card" :auto-upload="false">
<el-icon><Plus /></el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<el-icon><zoom-in /></el-icon>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<el-icon><Download /></el-icon>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
<template #tip>
<div class="el-upload__tip">
<el-icon><InfoFilled /></el-icon>jpgjpegpnggif1M 4
</div>
</template>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-form-item>
<el-form-item label="商品数量" class="locate-address">
<el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
</el-form-item>
</el-form>
</div>
<div class="right">
<el-form :model="form" label-width="120px">
<el-form-item label="商品描述" class="product-description">
<el-input
style="width: 2.0833rem"
v-model="textarea"
:rows="2"
type="textarea"
placeholder="请输入商品描述"
/>
<div class="tip">
<el-icon><InfoFilled /></el-icon>~
</div>
<div class="add-product">加入到商品库</div>
</el-form-item>
</el-form>
</div>
</div>
<div class="footer"><div class="add-order-btn">增加商品</div></div>
</div>
<div class="order-information">
<div class="header">订单设置</div>
<div class="form">
<div class="left">
<el-form :model="form" label-width="120px">
<el-form-item label="下单模式" class="order-mode">
<el-radio-group v-model="radio1" size="large">
<el-radio-button label="发布抢单" />
<el-radio-button label="发布报价单" />
<el-radio-button label="指定店铺" />
</el-radio-group>
<div class="tip">
<el-icon><InfoFilled /></el-icon>~
</div>
</el-form-item>
<el-form-item label="销售价" class="sales-price">
<el-input
style="width: .7813rem"
v-model="input"
placeholder="Please input"
:formatter="(value :any) => `元 ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="(value : any) => value.replace(/\$\s?|(,*)/g, '')"
/>
<div class="tail"><el-icon><QuestionFilled /></el-icon><div></div></div>
</el-form-item>
<el-form-item label="销售价" class="bid">
<el-input
style="width: .7813rem"
v-model="input"
placeholder="Please input"
:formatter="(value: any) => `元 ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="(value: any) => value.replace(/\$\s?|(,*)/g, '')"
/>
<div class="tail">可用余额<div class="money">0</div><div class="krypton">立即充值</div></div>
<div class="tip">
<el-icon><InfoFilled /></el-icon> <span></span>
</div>
</el-form-item>
<el-form-item label="画图审核">
<el-switch v-model="value1" />
</el-form-item>
</el-form>
</div>
<div class="right">
<el-form :model="form" label-width="120px">
<el-form-item label="商家备忘">
<el-input
style="width: 2.0833rem"
v-model="textarea"
:rows="2"
type="textarea"
placeholder="订单备忘,仅下单方乐见"
/>
</el-form-item>
<el-form-item label="第三方订单号" >
<el-input
style="width: 2.0833rem"
v-model="input"
placeholder="请输入第三方订单号"
maxlength="100"
show-word-limit
/>
</el-form-item>
<el-form-item label="发票信息" >
<el-input
style="width: 2.0833rem"
v-model="input"
placeholder="请输入发票信息·"
maxlength="100"
show-word-limit
/>
</el-form-item>
</el-form>
</div>
<div class="right"></div>
</div>
</div>
<div class="order-information" >
<div class="settlement">
<div class="left">
<div class="item">订单类型<span>鲜花</span></div>
<div class="item">商品数量<span>1</span></div>
<div class="item">收货时间<span>1024-01-05 不限时间</span></div>
</div>
<div class="content">订单价格<div>0.00</div></div>
<div class="right">确认无误立即下单</div>
</div>
</div>
</div>
@ -52,16 +287,61 @@ const form = reactive({
resource: '',
desc: '',
})
const radio1 = ref('')
const onSubmit = () => {
console.log('submit!')
}
const value = ref('')
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
]
import { Delete, Download, Plus, ZoomIn, InfoFilled,QuestionFilled } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const handleRemove = (file: UploadFile) => {
console.log(file)
}
const handlePictureCardPreview = (file: UploadFile) => {
dialogImageUrl.value = file.url!
dialogVisible.value = true
}
const handleDownload = (file: UploadFile) => {
console.log(file)
}
</script>
<style lang="scss" scoped>
.banner {
width: 100%;
background-color: #fff;
padding-bottom: .9792rem;
.nav {
height: 1.8333rem;
width: 100%;
@ -94,7 +374,7 @@ const onSubmit = () => {
}
.order-information {
width: 100%;
height: 3.4896rem;
// height: 3.4896rem;
border: 1px dashed #aaa;
margin-top: 0.1563rem;
.header {
@ -123,8 +403,201 @@ const onSubmit = () => {
flex: 1;
padding: 0.1042rem;
}
.left {
.timing-receipt {
width: 0.375rem;
height: 0.1771rem;
background-color: #f3f4f8;
font-size: 0.0729rem;
text-align: center;
line-height: 0.1771rem;
border-radius: 0.0781rem;
color: #8a8e99;
margin-left: 0.026rem;
}
.map {
.dlaceholding {
width: 2.0833rem;
height: 0.7292rem;
background-color: #d9d9d9;
}
}
.upload-image {
::v-deep .el-upload-list__item {
width: 0.4792rem;
height: 0.4792rem;
}
::v-deep .el-upload {
width: 0.4792rem;
height: 0.4792rem;
}
::v-deep .el-upload__tip {
.el-icon {
top: 2px;
}
}
}
.order-mode {
.tip {
width: 100%;
color: #999999;
font-size: 12px;
.el-icon {
top: 2px;
}
}
}
.sales-price{
.tail{
display: flex;
align-items: center;
color: #999999;
i{
margin: 0 .026rem;
}
}
}
.bid{
.tail{
color: #999999;
display: flex;
.money{
color: #e1a130;
// margin-left: .026rem;
}
.krypton{
color: #43A7E5;
text-decoration: underline;
cursor: pointer;
margin-left: .026rem;
}
}
.tip {
width: 100%;
color: #999999;
font-size: 12px;
.el-icon {
top: 2px;
}
span{
color: #43A7E5;
text-decoration: underline;
cursor: pointer;
margin-left: .026rem;
}
}
}
}
.right {
.product-description {
.tip {
width: 100%;
color: #424447;
font-size: 12px;
.el-icon {
top: 2px;
}
}
.add-product {
width: 0.9375rem;
height: 0.1563rem;
background-color: #f3f4f8;
color: #101010;
font-size: 0.0625rem;
text-align: center;
line-height: 0.1563rem;
margin-top: 0.2344rem;
}
}
}
}
.settlement{
height: .6563rem;
padding: .0833rem .2135rem;
display: flex;
justify-content: space-between;
align-items: center;
.left{
display: flex;
flex-direction: column;
// align-items: center;
justify-content: space-around;
height: 100%;
color: #575D6C;
font-size: .0833rem;
span{
color: #252B3A;
}
}
.content{
display: flex;
align-items: center;
color: #252B3A;
font-size: .0938rem;
div{
color: #FF4E8D;
font-size: .1354rem;
font-weight: 700;
}
}
.right{
width: 1.25rem;
height: .2083rem;
text-align: center;
line-height: .2083rem;
color: #fff;
background: linear-gradient(90deg,#FF99BD 0%,#FFDDBE 100%);
border-radius:.0521rem;
font-size:.0833rem;
cursor:pointer;
}
}
.footer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 0.3438rem;
border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.5em, white 0, white 0.75em);
.add-order-btn {
width: 0.7188rem;
height: 0.2083rem;
border: 1px solid #ff4e8d;
color: #ff4e8d;
text-align: center;
line-height: 0.2083rem;
font-size: 0.0729rem;
}
}
}
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
width: 0.625rem;
}
::v-deep .el-input__prefix {
display: none;
}
.receipt-time {
::v-deep .el-input {
width: 0.6667rem;
margin-left: 0.026rem;
}
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner{
color:#FF518F;
background:none;
}
::v-deep .el-radio-button:last-child .el-radio-button__inner{
width:.6667rem;
// height:.1771rem;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner{
width:.6667rem;
margin-right:.026rem;
}
}
</style>

@ -0,0 +1,224 @@
<template>
<div class="main">
<div class="banner">
<div class="order-information">
<div class="header">接单中心</div>
<div class="condition-scarch">
<ul>
<li>
<div class="label">收货地址</div>
<el-select
v-model="value"
class="m-2"
placeholder="请选择地址信息"
style="width: 1.875rem; margin-right: 0.0781rem"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input style="width: 1.4583rem" v-model="input" placeholder="详细地址街道..." />
<div class="search-btn">收索</div>
</li>
<li>
<div class="label">成交价</div>
<div class="price-whel">
<div tabindex="1">不限</div>
<div tabindex="2">100元以下</div>
<div tabindex="3">100-200</div>
<div tabindex="4">200-300</div>
<div tabindex="5">300-400</div>
<div tabindex="6">400元以上</div>
</div>
</li>
<li>
<div class="label">收货时间</div>
<div class="price-whel">
<div tabindex="1">不限</div>
<div tabindex="2">今天</div>
<div tabindex="3">1-3</div>
<div tabindex="4">4-7</div>
<div tabindex="6">1周以上</div>
</div>
</li>
</ul>
</div>
</div>
<div class="tabs">
<div :class="active === 0 ? 'standard active' : 'standard'" @click="active = 0">综合排序</div>
<div :class="active === 1 ? 'standard active' : 'standard'" @click="active = 1">按配送时间</div>
<div :class="active === 2 ? 'standard active' : 'standard'" @click="active = 2">按下单时间</div>
<div :class="active === 3 ? 'standard active sort' : 'standard sort'" @click="active = 3">
按订单金额
<div v-if="active==3" class="sort-box">
<div :class="activeSort == 0 ? 'ascending-orde active-sort' : 'ascending-orde'" @click="activeSort = 0">
<el-icon><CaretTop /></el-icon>
</div>
<div @click="activeSort = 1" :class="activeSort == 1 ? 'descending active-sort' : 'descending'">
<el-icon><CaretBottom /></el-icon>
</div>
</div>
<div v-else class="sort-box">
<div class="ascending-orde">
<el-icon><CaretTop /></el-icon>
</div>
<div class="descending">
<el-icon><CaretBottom /></el-icon>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
const value = ref('')
const active = ref(0)
const input = ref('')
const activeSort = ref(0)
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
]
</script>
<style lang="scss" scoped>
.main {
width: 100%;
.banner {
width: 6.25rem;
margin: 0 auto;
.order-information {
width: 100%;
// height: 3.4896rem;
margin-top: 0.026rem;
background-color: #fff;
.header {
// background-color: #f3f4f8;
height: 0.2083rem;
color: #252b3a;
font-size: 0.0833rem;
line-height: 0.2083rem;
padding: 0 0.2604rem;
display: flex;
align-items: center;
font-weight: 700;
border-bottom: 1px solid #e1e1e3;
}
.header::before {
content: ' ';
display: block;
background-color: #ff4e8d;
width: 0.0156rem;
height: 0.0833rem;
margin-right: 0.026rem;
}
.condition-scarch {
padding: 0.1042rem 0.3542rem;
ul {
li {
list-style: none;
display: flex;
align-items: center;
color: #252b3a;
font-size: 0.0729rem;
margin:.1042rem 0;
.label {
width: 0.3646rem;
text-align: right;
}
.search-btn {
width: 0.4167rem;
height: 0.1771rem;
color: #fff;
text-align: center;
font-size: 0.0729rem;
line-height: 0.1771rem;
border-radius: 0.1042rem;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
margin-left: 0.0521rem;
cursor: pointer;
}
.price-whel {
display: flex;
align-items: center;
div {
margin-right: 0.2135rem;
cursor: pointer;
}
div:focus,
div:hover {
color: #ff4e8d;
}
}
}
}
}
}
.tabs {
width: 100%;
height: 0.2083rem;
background-color: #fff;
display: flex;
margin-top: 0.2344rem;
margin-bottom: 0.1302rem;
.standard {
width: 0.7292rem;
height: 100%;
color: #252b3a;
font-size: 0.0729rem;
text-align: center;
line-height: 0.2083rem;
border-radius: 0.0313rem;
cursor: pointer;
}
.active {
color: #fff;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
}
.sort {
display: flex;
justify-content: center;
.sort-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 0.0365rem;
color: #b1b6c1;
div {
line-height: 0;
display: inline-block;
}
.active-sort {
color: #fff;
}
.descending{
margin-top: -5px;
}
}
}
}
}
}
</style>
Loading…
Cancel
Save