diff --git a/assets/scss/checkbox.scss b/assets/scss/checkbox.scss index 114e682..8685e4c 100644 --- a/assets/scss/checkbox.scss +++ b/assets/scss/checkbox.scss @@ -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); -// } \ No newline at end of file +.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); +} \ No newline at end of file diff --git a/assets/scss/element/index.scss b/assets/scss/element/index.scss index eaba48a..92c2155 100644 --- a/assets/scss/element/index.scss +++ b/assets/scss/element/index.scss @@ -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'; diff --git a/components/layoutHeader.vue b/components/layoutHeader.vue index 2ae6470..93e501b 100644 --- a/components/layoutHeader.vue +++ b/components/layoutHeader.vue @@ -11,6 +11,9 @@
  • 服务中心
  • 下载中心
  • + + 点击跳转到 About 页面 +
    @@ -32,7 +35,7 @@ const active = ref(null) const userLoginRef = shallowRef() const goTo = async (index: number,url?:string) => { - await linkNavigateTo(url) + await linkNavigateTo(url) // console.log(active.value.offsetWidth); const width = active.value.offsetWidth active.value.style.left = (index - 1) * width + 'px' diff --git a/pages/homeIndex/placeOrder.vue b/pages/homeIndex/placeOrder.vue index c12d658..fd4b379 100644 --- a/pages/homeIndex/placeOrder.vue +++ b/pages/homeIndex/placeOrder.vue @@ -15,21 +15,256 @@ - - + + - - + + + + + +
    定时配送
    +     + + + + + + + + + + + + +
    +     + + + +     +
    +
    + + + + + + + + + + + + + + + + + +
    + + +
    +
    商品信息
    +
    +
    + + + + + + + + + + + Preview Image + + + + + + +
    +
    + + + +
    + 详细描述商品信息能让花店快速接单~ +
    +
    加入到商品库
    +     +     +
    +
    +
    增加商品
    +
    +
    +
    订单设置
    +
    +
    + + + + + + + +
    + 详细描述商品信息能让花店快速接单~ +
    +     + + +
    非必填
    +     + + +
    （可用余额：
    ￥0
    立即充值
    ）
    +
    + 价格过低可能导致店铺店铺不接单 查看参考价格 +
    +     + + + +     +
    +
    + + + + + + + + +
    -
    +
    +
    +
    +
    +
    +
    订单类型：鲜花
    +
    商品数量：1
    +
    收货时间：1024-01-05 不限时间
    +
    +
    订单价格：
    ￥0.00
    +
    确认无误，立即下单
    @@ -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) +}