From 4eb0c6b48fe570f87f2142b13f3d0cde5a8dff37 Mon Sep 17 00:00:00 2001
From: pjhmizn49 <zhangjiadi2008@126.com>
Date: Fri, 13 Dec 2024 09:20:06 +0800
Subject: [PATCH] ADD file via upload

---
 .../src/components/CommonHeader.vue           | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 flower_user_front/src/components/CommonHeader.vue

diff --git a/flower_user_front/src/components/CommonHeader.vue b/flower_user_front/src/components/CommonHeader.vue
new file mode 100644
index 0000000..ea6f8b0
--- /dev/null
+++ b/flower_user_front/src/components/CommonHeader.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="header">
+        <div class="header-top">
+            <div class="top-left">
+                <span style="font-size: 14px;margin-left: 30px">鲜花定制好花网，提供鲜花定制预定和送花上门服务！</span>
+                <span style="color: red; font-weight: bold;">123-456-7890</span>
+            </div>
+            <div class="top-right">
+                <el-button class="top-button" @click="navTo('/cart')" type="text">
+                    <i class="el-icon-shopping-cart-2" style="font-weight: bold;font-size: 16px"></i>
+                    购物车
+                </el-button>
+                <el-button class="top-button" @click="navTo('/user')" type="text">
+                    <i class="el-icon-user" style="font-weight: bold;font-size: 16px"></i>
+                    个人中心
+                </el-button>
+                <el-button class="top-button" @click="navTo('/chat')" type="text">
+                    <i class="el-icon-chat-dot-round" style="font-weight: bold;font-size: 16px"></i>
+                    联系客服定制鲜花
+                </el-button>
+                <el-button class="top-button" @click="logout" type="text">退出</el-button>
+            </div>
+        </div>
+        <div class="header-bottom">
+            <div class="bottom-left">
+                <a href="/home"><img src="@/assets/homeLogo.png" style="width: 400px;height: 400px;margin-left: 50px"></a>
+            </div>
+            <div class="bottom-center" style="display: flex">
+                <el-input placeholder="请输入搜索内容" v-model="input"></el-input>
+                <el-button @click="navTo('/search?key=' + input)" type="danger" icon="el-icon-search" round ></el-button>
+            </div>
+            <div class="bottom-right">
+                <img src="@/assets/phone.png" style="width: 280px;height: 70px;margin-right: 50px">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Cookie from "js-cookie";
+import axios from "axios";
+export default {
+    data(){
+        return {
+            input:''
+        }
+    },
+    methods:{
+        navTo(url){
+            location.href = url
+        },
+        logout(){
+            this.$confirm('确认退出？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                //登出功能，清空Cookie中的token
+                Cookie.remove('token')
+                //清空Cookie中的menu
+                Cookie.remove('menu')
+                this.$router.push('/visitor')
+            }).catch(() => {
+
+            });
+        }
+    }
+}
+</script>
+<style>
+.header-top{
+    background-color: #f4f4f4;
+    height: 50px;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.header-bottom{
+    height: 130px;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.top-right{
+    margin-right: 20px;
+}
+.header-bottom .el-input__inner{
+    width: 400px;
+    height: 60px;
+    border-radius: 20px;
+    border: 3px solid #f66d6e;
+}
+.header-bottom .el-input__inner:hover{
+    border-color: #f66d6e;
+}
+.header-bottom .el-button{
+    height: 60px;
+    width: 70px;
+    margin: 0 0 0 -60px;
+    z-index: 999
+}
+.top-right .top-button{
+    color: #333;
+    margin-right: 30px;
+    font-size: 15px;
+    font-weight: bolder;
+}
+.top-right .top-button:hover{
+    color: red;
+}
+</style>
\ No newline at end of file