Your Name
10 months ago
parent
9f60a319e4
commit
e26bce63a7
13 changed files with 835 additions and 375 deletions
|
After Width: | Height: | Size: 225 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 357 KiB |
|
After Width: | Height: | Size: 54 KiB |
@ -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': #E93323, |
||||
// ), |
||||
// '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'; |
||||
|
||||
@ -0,0 +1,38 @@ |
||||
<template> |
||||
<div class="order-information"> |
||||
<div class="header">{{ title }}</div> |
||||
<slot></slot> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
const props = defineProps(['title']) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.order-information { |
||||
width: 100%; |
||||
height: 3.4896rem; |
||||
border: 1px dashed #aaa; |
||||
margin-top: 0.1563rem; |
||||
.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; |
||||
} |
||||
.header::before { |
||||
content: ' '; |
||||
display: block; |
||||
background-color: #ff4e8d; |
||||
width: 0.0156rem; |
||||
height: 0.0833rem; |
||||
margin-right: 0.026rem; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,130 @@ |
||||
<template> |
||||
<div class="banner"> |
||||
<div class="nav"></div> |
||||
<div class="main"> |
||||
<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> |
||||
<div v-if="active === 0" class="standard-box"> |
||||
<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="配送类型"> |
||||
<el-radio-group v-model="radio1" size="large"> |
||||
<el-radio-button label="配送" /> |
||||
<el-radio-button 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> |
||||
</el-form> |
||||
</div> |
||||
<div class="right"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div v-else-if="active === 1" class="fast-box">快速下单</div> |
||||
<div v-else class="batch">批量下单</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
const active = ref<number>(0) |
||||
const form = reactive({ |
||||
name: '', |
||||
region: '', |
||||
date1: '', |
||||
date2: '', |
||||
delivery: false, |
||||
type: [], |
||||
resource: '', |
||||
desc: '', |
||||
}) |
||||
|
||||
const onSubmit = () => { |
||||
console.log('submit!') |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.banner { |
||||
width: 100%; |
||||
background-color: #fff; |
||||
.nav { |
||||
height: 1.8333rem; |
||||
width: 100%; |
||||
background-color: skyblue; |
||||
} |
||||
.main { |
||||
width: 6.25rem; |
||||
margin: 0 auto; |
||||
.tabs { |
||||
width: 100%; |
||||
height: 0.2083rem; |
||||
background-color: #f3f4f8; |
||||
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%); |
||||
} |
||||
} |
||||
.order-information { |
||||
width: 100%; |
||||
height: 3.4896rem; |
||||
border: 1px dashed #aaa; |
||||
margin-top: 0.1563rem; |
||||
.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; |
||||
} |
||||
.header::before { |
||||
content: ' '; |
||||
display: block; |
||||
background-color: #ff4e8d; |
||||
width: 0.0156rem; |
||||
height: 0.0833rem; |
||||
margin-right: 0.026rem; |
||||
} |
||||
.form { |
||||
display: flex; |
||||
height: 100%; |
||||
.left, |
||||
.right { |
||||
flex: 1; |
||||
padding: 0.1042rem; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,7 @@ |
||||
module.exports = { |
||||
plugins: { |
||||
'postcss-px2rem': { |
||||
remUnit: 192 // 设计稿宽度 / 10，例如设计稿宽度为750px，则remUnit为75
|
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue