dlsx
/
hjb_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

接单顶部布局完成

Browse Source
develoop
Your Name 10 months ago
parent 92246839c8
commit b9f38708bf
2 changed files with 245 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      components/layoutHeader.vue
  2. 224
      pages/homeIndex/receivingorders.vue

34
components/layoutHeader.vue
Unescape View File

@ -3,14 +3,14 @@
<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>
@ -31,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) => {
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 = () => {
@ -67,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;
@ -89,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 {

224
pages/homeIndex/receivingorders.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save