接单顶部布局完成

components/layoutHeader.vue

@@ -3,14 +3,14 @@
     <div class="nav">
       <div class="menu">
         <ul>
-          <li @click="goTo(1,'/')">首页</li>
+          <li :class="active == 1 ? 'active' : ''" @click="goTo(1,'/')">首页 <div v-if="active == 1" class="active-border"></div> </li>
-          <li @click="goTo(2,'homeIndex/placeOrder')">下订单</li>
+          <li :class="active == 2 ? 'active' : ''"  @click="goTo(2,'/homeIndex/placeOrder')">下订单 <div v-if="active == 2" class="active-border"></div></li>
-          <li @click="goTo(3)">接订单</li>
+          <li :class="active == 3 ? 'active' : ''"  @click="goTo(3,'/homeIndex/receivingorders')">接订单<div v-if="active == 3" class="active-border"></div></li>
-          <li @click="goTo(4)">找花店</li>
+          <li :class="active == 4 ? 'active' : ''"  @click="goTo(4)">找花店<div v-if="active == 4" class="active-border"></div></li>
-          <li @click="goTo(5)">花店地图</li>
+          <li :class="active == 5 ? 'active' : ''"  @click="goTo(5)">花店地图<div v-if="active == 5" class="active-border"></div></li>
-          <li @click="goTo(6)">服务中心</li>
+          <li :class="active == 6 ? 'active' : ''"  @click="goTo(6)">服务中心<div v-if="active == 6" class="active-border"></div></li>
-          <li @click="goTo(7)">下载中心</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>
+          <!-- <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
+//  const width = active.value.offsetWidth
-  active.value.style.left = (index - 1) * width + 'px'
+//   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 {

pages/homeIndex/receivingorders.vue

@@ -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>