From d5f572496c5fb12fec2fe346b847bf58331299c9 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 17 七月 2024 15:56:51 +0800
Subject: [PATCH] 1
---
src/components/headNav/headNav.vue | 932 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 494 insertions(+), 438 deletions(-)
diff --git a/src/components/headNav/headNav.vue b/src/components/headNav/headNav.vue
index 8f4da73..37ff5c2 100644
--- a/src/components/headNav/headNav.vue
+++ b/src/components/headNav/headNav.vue
@@ -1,479 +1,535 @@
<template>
- <view class="headNav">
- <view class="NavTop flex" :style="{backgroundImage: 'url('+ bg + ')'}">
- <view class="santiaogang" style="width: .34rem;height: .34rem;margin-right: 3rem;"
- @click="menuNav = !menuNav"><img style="width: 100%;height: 100%;"
- src="@/static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png" alt="" /></view>
- <view class="flex" style="letter-spacing: 5rpx;">
- <view class="logo"></view>
- <view class="" style="margin-left: .19rem;font-size: .24rem;font-family: cursive;font-weight: 900;">
- {{text}}
- </view>
- </view>
- <view class="NavTopr flex">
- <view class="flex searchCss" :style="{'backgroundColor': isExpanded==true?'#fff':''}"
- style="border-radius: .5rem; width: 2.33rem;margin-right: .30rem;justify-content: flex-end;">
- <!-- overflow: hidden; -->
- <input :style="{'display': isExpanded == true ? 'block' : 'none'}" type="text"
- style="margin-left: .02rem; flex: 1; background-color: #fff; font-size: .13rem;"
- @blur="InputBlur" class="search-input" v-model="searchInput" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" />
- <view class="search-logo" @click="toggleSearch"
- :style="{'backgroundColor':searchBg==true?'#244A7B':'#DA7A2B'}"
- style="background-color: #000;border-radius: 50%;margin-top: -4rpx;"></view>
- </view>
- <el-dropdown trigger="click" @command="handleCommand">
- <!-- <view @click="iconClick(2)" class="s2 ss1 "></view> -->
- <img class="cursor" @click="changePassword(1)" src="@/static/image/profile.svg" alt="" />
- <el-dropdown-menu v-if="isCommand" slot="dropdown">
- <el-dropdown-item command="1">淇敼瀵嗙爜</el-dropdown-item>
- <el-dropdown-item command="2" >閫�鍑虹櫥褰�</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- <img class="cursor" @click="changePassword(2)" src="@/static/image/quote.svg" style="margin-right: 0;"
- alt="" />
- </view>
- </view>
- <view class="mImage" :style="{backgroundImage: 'url('+ bg1 + ')'}"></view>
- <el-dialog :visible.sync="menuNav" class="leftListBg" :modal="false" title="瀵硅瘽妗嗘爣棰�">
- <!-- 鑳屾櫙 -->
- <img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" />
- <view class="" style="position: relative;z-index: 999;">
- <view class="flex flex-center LeftLogo">
- <!-- <img src="@/static/image/logo.png" ></img> -->
- <view class="img"></view>
- </view>
- <el-menu :default-active="idIndex" active-text-color="#ffffff" class="el-menu-vertical-demo"
- @select="handleSelect">
- <el-menu-item index="0">
- <span slot="title">棣栭〉</span>
- </el-menu-item>
- <el-menu-item index="1">
- <span slot="title">涓尰浜虹墿鏁版嵁搴�</span>
- </el-menu-item>
- <el-menu-item index="2">
- <span slot="title">涓栧尰鍖诲鏁版嵁搴�</span>
- </el-menu-item>
- <el-menu-item index="3">
- <span slot="title">涓尰鍖诲娴佹淳</span>
- </el-menu-item>
- <el-menu-item index="4">
- <span slot="title">涓尰鍦板煙鍥捐氨</span>
- </el-menu-item>
- <el-menu-item index="5">
- <span slot="title">涓尰鍖讳簨鍒跺害</span>
- </el-menu-item>
- </el-menu>
- </view>
- </el-dialog>
- <!-- <view class="" style="position: fixed;right: 0;top: 0;" @click="dialogVisible = !dialogVisible">姘存按姘存按</view> -->
- <!-- <el-card v-if="menuNav"
+ <view class="headNav">
+ <view class="NavTop flex" :style="{ backgroundImage: 'url(' + bg + ')' }">
+ <view
+ class="santiaogang"
+ style="
+ width: 0.34rem;
+ height: 0.34rem;
+ margin-right: 3rem;
+ cursor: pointer;
+ "
+ title="瀵艰埅鑿滃崟"
+ @click="menuNav = !menuNav"
+ ><img
+ style="width: 100%; height: 100%"
+ src="@/static/涓尰浜虹墿鐭ヨ瘑搴�0201/涓夋潯鏉�.png"
+ alt=""
+ /></view>
+ <view class="flex" style="letter-spacing: 5rpx">
+ <view class="logo"></view>
+ <view
+ style="margin-left: 0.19rem; font-size: 0.24rem; font-weight: 900"
+ >
+ {{ text }}
+ </view>
+ </view>
+ <view class="NavTopr flex">
+ <view
+ class="flex searchCss"
+ :style="{ backgroundColor: isExpanded == true ? '#fff' : '' }"
+ style="
+ border-radius: 0.5rem;
+ width: 2.33rem;
+ margin-right: 0.3rem;
+ justify-content: flex-end;
+ position: relative;
+ "
+ >
+ <input
+ :style="{ display: isExpanded == true ? 'block' : 'none' }"
+ type="text"
+ style="
+ margin-left: 0.02rem;
+ flex: 1;
+ background-color: #fff;
+ font-size: 0.13rem;
+ padding-right: 30px;
+ box-sizing: border-box;
+ "
+ @blur="InputBlur"
+ @confirm="toggleSearch"
+ class="search-input"
+ v-model="searchInput"
+ placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�"
+ />
+ <span
+ class="cleanupBtn"
+ v-if="searchInput"
+ @click="searchInput = ''"
+ style="
+ position: absolute;
+ top: 50%;
+ margin-top: -10px;
+ right: 42px;
+ color: #fff;
+ z-index: 2;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ line-height: 20px;
+ background-color: #a5a5a5;
+ font-weight: bold;
+ border-radius: 50%;
+ font-size: 12px;
+ cursor: pointer;
+ "
+ >鉁�</span
+ >
+ <view
+ title="鎼滅储"
+ class="search-logo"
+ @click="toggleSearch"
+ :style="{
+ backgroundColor: searchBg == true ? '#244A7B' : '#DA7A2B'
+ }"
+ style="
+ background-color: #000;
+ border-radius: 50%;
+ "
+ ></view>
+ </view>
+ <el-dropdown trigger="click" @command="handleCommand">
+ <!-- <view @click="iconClick(2)" class="s2 ss1 "></view> -->
+ <img
+ title="涓汉涓績"
+ class="cursor"
+ @click="changePassword(1)"
+ src="@/static/image/profile.svg"
+ alt=""
+ />
+ <el-dropdown-menu v-if="isCommand" slot="dropdown">
+ <el-dropdown-item command="1">淇敼瀵嗙爜</el-dropdown-item>
+ <el-dropdown-item command="2">閫�鍑虹櫥褰�</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ <img
+ title="甯姪"
+ class="cursor"
+ @click="changePassword(2)"
+ src="@/static/image/quote.svg"
+ style="margin-right: 0"
+ alt=""
+ />
+ </view>
+ </view>
+ <view
+ class="mImage"
+ :style="{ backgroundImage: 'url(' + bg1 + ')' }"
+ ></view>
+ <el-dialog
+ :visible.sync="menuNav"
+ class="leftListBg"
+ :modal="false"
+ title="瀵硅瘽妗嗘爣棰�"
+ >
+ <!-- 鑳屾櫙 -->
+ <img class="leftListBgImage" src="@/static/image/leftListBg.png" alt="" />
+ <view style="position: relative; z-index: 999">
+ <view class="flex flex-center LeftLogo">
+ <!-- <img src="@/static/image/logo.png" ></img> -->
+ <view class="img"></view>
+ </view>
+ <el-menu
+ :default-active="idIndex"
+ active-text-color="#ffffff"
+ class="el-menu-vertical-demo"
+ @select="handleSelect"
+ >
+ <el-menu-item index="0">
+ <span slot="title">棣栭〉</span>
+ </el-menu-item>
+ <el-menu-item index="1">
+ <span slot="title">鍘嗕唬浜虹墿</span>
+ </el-menu-item>
+ <el-menu-item index="2" class="oActive">
+ <span slot="title">瀹跺浼犳壙</span>
+ </el-menu-item>
+ <el-menu-item index="6">
+ <span slot="title">瀛︽湳娴佹淳</span>
+ </el-menu-item>
+ <el-menu-item index="3">
+ <span slot="title">瀛︽湳鍥捐氨</span>
+ </el-menu-item>
+ <el-menu-item index="4">
+ <span slot="title">鍦板煙鍥捐氨</span>
+ </el-menu-item>
+ <!-- <el-menu-item index="5">
+ <span slot="title">涓尰鍖讳簨鍒跺害</span>
+ </el-menu-item> -->
+ </el-menu>
+ </view>
+ </el-dialog>
+ <!-- <view style="position: fixed;right: 0;top: 0;" @click="dialogVisible = !dialogVisible">姘存按姘存按</view> -->
+ <!-- <el-card v-if="menuNav"
style="position: fixed;left: 0;top: 0; z-index: 999999999; width: 240px;height: 100vh;">
</el-card> -->
- </view>
+ </view>
</template>
<script>
- import {getlogout} from '@/api/index.js'
- export default {
- name: "headNav",
- props: {
- text: {
- type: String,
- default () {
- return '鏍囬'
- }
- },
- searchBg: {
- type: Boolean,
- default () {
- return true
- }
- },
- bg: {
- type: String,
- default () {
- return '/static/image/topBg.png'
- }
- },
- bg1: {
- type: String,
- default () {
- return '/static/image/line.png'
- }
- },
- idIndex: {
- type: String,
- default () {
- return '1'
- }
- }
- },
- data() {
- return {
- isExpanded: false, // 鎺у埗鎼滅储妗嗘槸鍚﹀睍寮�
- searchInput: '', // 鎼滅储妗嗚緭鍏ョ殑鍐呭
- menuNav: false,
- dialogVisible: false,
- isCommand: true
- };
- },
- methods: {
- // 淇敼瀵嗙爜
- changePassword(index) {
- if (index == 1) {
- // console.log('sdfdsf');
- // 妫�鏌� localStorage 涓槸鍚﹀瓨鍦� token
- if (localStorage.getItem('access_token')) {
- // token 瀛樺湪
- console.log('access_token');
- this.isCommand = true
- } else {
- // token 涓嶅瓨鍦�
- // console.log('Token does not exist.');
- this.isCommand = false
- // uni.navigateTo({
- // url: '/pages/Login/Login'
- // })
- console.log('涓嶅瓨鍦�');
- uni.showModal({
- // 璇㈤棶鐢ㄦ埛鏄惁閫�鍑虹櫥褰�
- title: '璇烽噸鏂扮櫥褰�',
- content: '鎮ㄧ‘瀹氳閲嶆柊鐧诲綍鍚�?',
- success: async (res) => {
- console.log(res, 'reresresrer');
- if (res.confirm) {
- setTimeout(() => {
- uni.reLaunch({
- url: '/pages/Login/Login',
- });
- }, 1500);
-
- } else if (res.cancel) {
- // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷');
- uni.showToast({
- title: '鐢ㄦ埛鐐瑰嚮鍙栨秷',
- icon: 'none',
- });
- }
- },
- });
- }
- // uni.navigateTo({
- // url: '/pages/changePassword/changePassword'
- // })
- } else if (index == 2) {
- console.log('甯姪');
- }
- },
- // 淇敼鑾峰彇閫�鍑烘寜閽�
- handleCommand(int) {
- if (int == 1) {
- console.log('淇敼瀵嗙爜');
- uni.navigateTo({
- url: '/pages/changePassword/changePassword'
- })
- } else if (int == 2) {
- // console.log('閫�鍑虹櫥褰�');
- uni.showModal({
- // 璇㈤棶鐢ㄦ埛鏄惁閫�鍑虹櫥褰�
- title: '閫�鍑虹櫥褰�',
- content: '鎮ㄧ‘瀹氳閫�鍑虹櫥褰曞悧?',
- success: async (res) => {
- console.log(res, 'reresresrer');
-
- if (res.confirm) {
- // 閫�鍑烘帴鍙�
- await getlogout().then(res => {
- //纭畾閫�鍑烘嬁鍒皌oken骞舵竻闄oken
- let TOKEN = uni.getStorageSync('access_token');
- uni.clearStorageSync();
- //閫�鍑烘垚鍔燂紒骞惰烦杞埌鍏朵粬椤甸潰
- uni.showToast({
- title: '閫�鍑烘垚鍔�',
- icon: 'none',
- });
- })
- setTimeout(() => {
- uni.reLaunch({
- url: '/pages/Login/Login',
- });
- }, 1500);
- } else if (res.cancel) {
- // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷');
- uni.showToast({
- title: '鐢ㄦ埛鐐瑰嚮鍙栨秷',
- icon: 'none',
- });
- }
- },
- });
- }
- },
- aaa() {
- console.log('ss');
- },
- handleSelect(index) {
- console.log(index);
- if (index === '0') {
- uni.navigateTo({
- url: '/pages/index/index?id=' + 0
- });
- } else if (index === '1') {
- uni.navigateTo({
- url:'/pages/characterRelation/characterRelation?id=' + 1
- });
- } else if (index === '2') {
- uni.navigateTo({
- url: '/pages/inherit/index?id=' + 2
- });
- } else if (index === '3') {
- uni.navigateTo({
- url: '/pages/dataDisplay/dataDisplay?id=' + 3
- });
- } else if (index === '4') {
- uni.navigateTo({
- url: '/pages/territory/territory?id=' + 4
- });
- } else if (index === '5') {
- uni.navigateTo({
- url: '/pages/TcmSystem/TcmSystem?id=' + 5
- });
- }
- },
- // 鎼滅储妗嗙殑鐨勭Щ鍑�
- InputBlur() {
-
- // this.isExpanded = !this.isExpanded;
- // this.searchInput = '';
- },
- // 鍒囨崲鎼滅储妗嗙殑灞曞紑鍜屾敹璧风姸鎬�
- toggleSearch() {
- // console.log('鎾掓棪鑼冨痉钀ㄥ彂鐢熺殑',this.searchInput);
- this.isExpanded = !this.isExpanded;
- this.$nextTick(() => {
- if (this.searchInput.trim() !== '') {
- console.log('鎼滅储', this.searchInput);
- } else {
- console.log('涓嶆悳绱�');
- }
-
- this.searchInput = '';
- console.log(this.isExpanded);
- })
- }
- }
- }
+import { getlogout } from "@/api/index.js";
+export default {
+ name: "headNav",
+ props: {
+ text: {
+ type: String,
+ default() {
+ return "鏍囬";
+ }
+ },
+ searchBg: {
+ type: Boolean,
+ default() {
+ return true;
+ }
+ },
+ bg: {
+ type: String,
+ default() {
+ return "/static/image/topBg.png";
+ }
+ },
+ bg1: {
+ type: String,
+ default() {
+ return "/static/image/line.png";
+ }
+ },
+ idIndex: {
+ type: String,
+ default() {
+ return "1";
+ }
+ }
+ },
+ data() {
+ return {
+ isExpanded: false, // 鎺у埗鎼滅储妗嗘槸鍚﹀睍寮�
+ searchInput: "", // 鎼滅储妗嗚緭鍏ョ殑鍐呭
+ menuNav: false,
+ dialogVisible: false,
+ isCommand: true
+ };
+ },
+ methods: {
+ // 淇敼瀵嗙爜
+ changePassword(index) {
+ if (index == 1) {
+ // 妫�鏌� localStorage 涓槸鍚﹀瓨鍦� token
+ if (localStorage.getItem("access_token")) {
+ // token 瀛樺湪
+ this.isCommand = true;
+ } else {
+ // token 涓嶅瓨鍦�
+ this.isCommand = false;
+ // uni.navigateTo({
+ // url: '/pages/Login/Login'
+ // })
+ uni.showModal({
+ // 璇㈤棶鐢ㄦ埛鏄惁閫�鍑虹櫥褰�
+ title: "璇烽噸鏂扮櫥褰�",
+ content: "鎮ㄧ‘瀹氳閲嶆柊鐧诲綍鍚�?",
+ success: async (res) => {
+ if (res.confirm) {
+ setTimeout(() => {
+ uni.reLaunch({
+ url: "/pages/Login/Login"
+ });
+ }, 1500);
+ } else if (res.cancel) {
+ // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷');
+ }
+ }
+ });
+ }
+ // uni.navigateTo({
+ // url: '/pages/changePassword/changePassword'
+ // })
+ } else if (index == 2) {
+ console.log("甯姪");
+ }
+ },
+ // 淇敼鑾峰彇閫�鍑烘寜閽�
+ handleCommand(int) {
+ if (int == 1) {
+ uni.navigateTo({
+ url: "/pages/changePassword/changePassword"
+ });
+ } else if (int == 2) {
+ uni.showModal({
+ // 璇㈤棶鐢ㄦ埛鏄惁閫�鍑虹櫥褰�
+ title: "閫�鍑虹櫥褰�",
+ content: "鎮ㄧ‘瀹氳閫�鍑虹櫥褰曞悧?",
+ success: (res) => {
+ if (res.confirm) {
+ // 閫�鍑烘帴鍙�
+ getlogout().then((res) => {
+ //纭畾閫�鍑烘嬁鍒皌oken骞舵竻闄oken
+ let TOKEN = uni.getStorageSync("access_token");
+ uni.clearStorageSync();
+ //閫�鍑烘垚鍔燂紒骞惰烦杞埌鍏朵粬椤甸潰
+ this.$message.success("閫�鍑烘垚鍔�");
+ uni.reLaunch({
+ url: "/pages/Login/Login"
+ });
+ });
+ } else if (res.cancel) {
+ // console.log('鐢ㄦ埛鐐瑰嚮鍙栨秷');
+ }
+ }
+ });
+ }
+ },
+ handleSelect(index) {
+ if (index === "0") {
+ uni.navigateTo({
+ url: "/pages/index/index?id=" + 0
+ });
+ } else if (index === "1") {
+ uni.navigateTo({
+ url: "/pages/character/index?id=" + 1
+ });
+ } else if (index === "2") {
+ uni.navigateTo({
+ url: "/pages/inherit/index?id=" + 2
+ });
+ } else if (index === "3") {
+ uni.navigateTo({
+ url: "/pages/academicGenres/index?id=" + 3
+ });
+ } else if (index === "4") {
+ uni.navigateTo({
+ url: "/pages/territory/territory?id=" + 4
+ });
+ } else if (index === "5") {
+ uni.navigateTo({
+ url: "/pages/TcmSystem/TcmSystem?id=" + 5
+ });
+ }
+ },
+ // 鎼滅储妗嗙殑鐨勭Щ鍑�
+ InputBlur() {
+ // this.isExpanded = !this.isExpanded;
+ // this.searchInput = '';
+ },
+ // 鍒囨崲鎼滅储妗嗙殑灞曞紑鍜屾敹璧风姸鎬�
+ toggleSearch() {
+ this.isExpanded = !this.isExpanded;
+ this.$nextTick(() => {
+ if (this.searchInput.trim() !== "") {
+ uni.navigateTo({
+ url:
+ "/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput
+ });
+ }
+ this.searchInput = "";
+ });
+ }
+ }
+};
</script>
<style scoped>
- .LeftLogo {
- width: 100%;
- margin: .52rem 0 .5rem;
+.LeftLogo {
+ width: 100%;
+ margin: 0.52rem 0 0.5rem;
- .img {
- width: .52rem;
- height: .52rem;
- background-image: url(@/static/image/logo3.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- /* image-rendering: pixelated; */
- }
- }
+ .img {
+ width: 0.52rem;
+ height: 0.52rem;
+ background-image: url(@/static/image/logo3.png);
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ /* image-rendering: pixelated; */
+ }
+}
- @media screen and (min-width:2560px)and (max-width:3840px) {
+::v-deep .el-menu .is-active {
+ background-color: #244a7b !important;
+ border-radius: 0.5rem;
+}
- ::v-deep .el-menu .is-active {
- background-color: #244A7B !important;
- border-radius: .5rem;
+::v-deep .el-menu .is-active.oActive {
+ background-color: #e27917 !important;
+}
- }
+@media screen and (min-width: 2560px) and (max-width: 3840px) {
+ .LeftLogo .img {
+ background-image: url(@/static/image/logo4.png);
+ }
+}
- .LeftLogo .img {
- background-image: url(@/static/image/logo4.png);
- }
- }
+@media screen and (min-width: 1366px) and (max-width: 1920px) {
+ .LeftLogo .img {
+ background-image: url(@/static/image/logo.png);
+ }
+}
- @media screen and (min-width:1366px) and (max-width:1920px) {
+::v-deep .uni-input-placeholder {
+ padding-left: 0.05rem;
+}
- ::v-deep .el-menu .is-active {
- background-color: #244A7B !important;
- border-radius: .5rem;
+.headNav {
+ /* 绮樻�у畾浣� */
+ position: sticky;
+ top: 0;
+ z-index: 99999999;
+}
- }
+.NavTop {
+ /* background-image: url("../../static/image/topBg.png"); */
+ background-size: 100% 100%;
+ padding: 0.16rem 0.24rem;
+ color: #fff !important;
- .LeftLogo .img {
- background-image: url(@/static/image/logo.png);
- }
- }
+ img {
+ width: 0.1rem;
+ height: 0.1rem;
+ vertical-align: middle;
+ }
- ::v-deep .uni-input-placeholder {
- padding-left: .05rem;
- }
+ .logo {
+ width: 0.32rem;
+ height: 0.32rem;
+ background: url(@/static/image/logo.png) 0 0 no-repeat;
+ background-size: 100% 100%;
+ }
- .headNav {
- /* 绮樻�у畾浣� */
- position: sticky;
- top: 0;
- z-index: 9;
- }
+ .NavTopr {
+ vertical-align: top;
- .NavTop {
- /* background: url(@/static/image/topBg.png); */
+ img {
+ width: 0.34rem;
+ height: 0.34rem;
+ margin-right: 0.3rem;
+ vertical-align: middle;
+ }
+ }
+}
- background-size: 100% 100%;
- padding: .16rem .24rem;
- color: #fff !important;
+.mImage {
+ width: 100%;
+ height: 0.2rem;
+ /* background-image: url(@/static/image/line.png); */
+ background-size: cover;
+ /* 鑳屾櫙鍥剧墖瑕嗙洊鏁翠釜鍏冪礌 */
+ background-position: center;
+ background-color: #fff;
+}
- img {
- width: .1rem;
- height: .1rem;
- vertical-align: middle;
- }
+.search-container {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 20rpx;
- .logo {
- width: .32rem;
- height: .32rem;
- background: url(@/static/image/logo.png) 0 0 no-repeat;
- background-size: 100% 100%;
- }
+ img {
+ margin: 0 !important;
+ margin-bottom: 4rpx !important;
+ }
+}
- .NavTopr {
- vertical-align: top;
+.search-bar {
+ width: 160rpx;
+ /* 鍒濆瀹藉害 */
+ transition: width 0.3s ease;
+ /* 杩囨浮鍔ㄧ敾 */
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-radius: 5px;
+ overflow: hidden;
+ border-radius: 30rpx;
+ background-color: #fff;
+}
- img {
- width: .34rem;
- height: .34rem;
- margin-right: .30rem;
- vertical-align: middle;
- }
- }
- }
+.search-bar.expanded {
+ width: 100%;
+ /* 灞曞紑鍚庣殑瀹藉害 */
+}
- .mImage {
- width: 100%;
- height: .2rem;
- /* background-image: url(@/static/image/line.png); */
- background-size: cover;
- /* 鑳屾櫙鍥剧墖瑕嗙洊鏁翠釜鍏冪礌 */
- background-position: center;
- background-color: #fff;
- }
+.search-input {
+ flex: 1;
+ /* 鍗犳嵁鍓╀綑绌洪棿 */
+ padding-left: 10rpx;
+ box-sizing: border-box;
+ /* border: 1rpx solid #fff; */
+ outline: none;
+ color: #000;
+ height: auto;
+ min-height: auto;
+}
+.search-logo {
+ width: 0.34rem;
+ /* logo鍥炬爣鐨勫搴� */
+ height: 0.34rem;
+ /* logo鍥炬爣鐨勯珮搴� */
+ margin-left: 10rpx;
+ /* 涓庤緭鍏ユ涔嬮棿鐨勯棿璺� */
+ cursor: pointer;
+ background-image: url(@/static/image/search.svg);
+ background-size: 100% 100%;
+}
+.leftListBg {
+ border-radius: 0;
+ .leftListBgImage {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ transform: scale(1.29);
+ }
+}
+.el-menu-vertical-demo {
+ border-right: 0 !important;
+ background-color: transparent;
+}
- .search-container {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 20rpx;
+::v-deep .el-menu .is-active {
+ background-color: #244a7b !important;
+ border-radius: 0.5rem;
- img {
- margin: 0 !important;
- margin-bottom: 4rpx !important;
- }
- }
+ /* padding: 0 .14rem !important; */
+}
- .search-bar {
- width: 160rpx;
- /* 鍒濆瀹藉害 */
- transition: width 0.3s ease;
- /* 杩囨浮鍔ㄧ敾 */
- display: flex;
- align-items: center;
- position: relative;
- border-radius: 5px;
- overflow: hidden;
- border-radius: 30rpx;
- background-color: #fff;
- }
-
- .search-bar.expanded {
- width: 100%;
- /* 灞曞紑鍚庣殑瀹藉害 */
- }
-
- .search-input {
- flex: 1;
- /* 鍗犳嵁鍓╀綑绌洪棿 */
- padding-left: 10rpx;
- box-sizing: border-box;
- /* border: 1rpx solid #fff; */
- outline: none;
- color: #000;
- height: auto;
- min-height: auto;
- }
-
- .search-logo {
- width: .34rem;
- /* logo鍥炬爣鐨勫搴� */
- height: .34rem;
- /* logo鍥炬爣鐨勯珮搴� */
- margin-left: 10rpx;
- /* 涓庤緭鍏ユ涔嬮棿鐨勯棿璺� */
- cursor: pointer;
- background-image: url(@/static/image/search.svg);
- background-size: 100% 100%;
- }
-
- .leftListBg {
- border-radius: 0;
-
- .leftListBgImage {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- transform: scale(1.29);
- }
- }
-
- .el-menu-vertical-demo {
- border-right: 0 !important;
- background-color: transparent;
- }
-
- ::v-deep .el-menu .is-active {
- background-color: #244A7B !important;
- border-radius: .5rem;
-
- /* padding: 0 .14rem !important; */
- }
-
- .el-menu-item {
- height: .34rem;
- line-height: .3rem;
- font-size: .16rem;
- font-weight: 500;
- margin: .13rem .14rem !important;
- /* display: flex;
+.el-menu-item {
+ height: 0.34rem;
+ line-height: 0.3rem;
+ font-size: 0.16rem;
+ font-weight: 500;
+ margin: 0.13rem 0.14rem !important;
+ /* display: flex;
justify-content: center;
align-items: center; */
- text-align: left;
- padding-left: .4rem !important;
- }
+ text-align: left;
+ padding-left: 0.4rem !important;
+}
- ::v-deep .el-dialog__body {
- padding-top: 0 !important;
- }
+::v-deep .el-dialog__body {
+ padding-top: 0 !important;
+}
- ::v-deep .el-dialog {
- margin-top: 0 !important;
- position: fixed;
- top: 0;
- left: 0;
- height: 100vh;
- width: 2.51rem;
- }
+::v-deep .el-dialog {
+ margin-top: 0 !important;
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ width: 2.51rem;
+}
- ::v-deep .el-dialog__header {
- display: none;
- }
+::v-deep .el-dialog__header {
+ display: none;
+}
- /* ::v-deep .el-menu-vertical-demo */
-</style>
\ No newline at end of file
+/* ::v-deep .el-menu-vertical-demo */
+</style>
--
Gitblit v1.9.1