From cd96b37b7c3836dbb832317878da84836c281ad8 Mon Sep 17 00:00:00 2001 From: "weijie.g@qq.com" Date: Fri, 10 Sep 2021 09:35:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=B0=E4=BE=9D=E8=B5=96no?= =?UTF-8?q?rmalize,=E5=90=AF=E5=8A=A8=E6=9C=8D=E5=8A=A1=E5=90=8E=E5=8F=AF?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=89=93=E5=BC=80=E6=B5=8F=E8=A7=88=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 165 +++++++++--------- package.json | 3 +- src/main.js | 1 + .../components/search/components/all.vue | 3 + src/views/taskbar/components/search/index.vue | 48 +++-- 5 files changed, 121 insertions(+), 99 deletions(-) create mode 100644 src/views/taskbar/components/search/components/all.vue diff --git a/package-lock.json b/package-lock.json index 63d6975..c2512a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1765,63 +1765,6 @@ "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=", "dev": true }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz", - "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.1", - "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz", - "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz", - "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz", - "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1626715907927&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz", - "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz", - "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, "ssri": { "version": "8.0.1", "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz", @@ -1830,28 +1773,6 @@ "requires": { "minipass": "^3.1.1" } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703400240&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz", - "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.3.3", - "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.3.3.tgz?cache=0&sync_timestamp=1626830452707&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.3.3.tgz", - "integrity": "sha1-5EDk6xJ4bhYTi12YthIgjynd9TI=", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } } } }, @@ -7863,6 +7784,11 @@ "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz", "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=" }, + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npm.taobao.org/normalize.css/download/normalize.css-8.0.1.tgz", + "integrity": "sha1-m5iiCHOLnMJjTKrLxC0THJdIe/M=" + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz", @@ -11416,6 +11342,87 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.5.0", + "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.5.0.tgz?cache=0&sync_timestamp=1628666727543&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.5.0.tgz", + "integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995588464&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz", + "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646697260&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz", + "integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz", + "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz", + "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz", + "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz", + "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703342506&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz", + "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-router": { "version": "4.0.10", "resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.10.tgz", diff --git a/package.json b/package.json index 97b10ff..3532d54 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,14 @@ "version": "0.1.0", "private": true, "scripts": { - "serve": "vue-cli-service serve", + "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "element-plus": "^1.0.2-beta.55", + "normalize.css": "^8.0.1", "vue": "^3.0.0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" diff --git a/src/main.js b/src/main.js index 3d63335..21fb3ff 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,7 @@ import 'element-plus/lib/theme-chalk/index.css'; import '@/assets/css/reset.min.css' import Directive from './directive' +import 'normalize.css/normalize.css' import '@/styles/index.scss' createApp(App).use(store).use(router).use(ElementPlus).use(Directive).mount('#app') diff --git a/src/views/taskbar/components/search/components/all.vue b/src/views/taskbar/components/search/components/all.vue new file mode 100644 index 0000000..61c7765 --- /dev/null +++ b/src/views/taskbar/components/search/components/all.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/taskbar/components/search/index.vue b/src/views/taskbar/components/search/index.vue index 8f79a4d..77d790e 100644 --- a/src/views/taskbar/components/search/index.vue +++ b/src/views/taskbar/components/search/index.vue @@ -1,13 +1,14 @@ @@ -16,10 +17,17 @@ import { ref } from "@vue/reactivity"; export default { setup() { let searchData = ref(undefined); - let activeName = ref("first"); + let activeName = ref("all"); + // input聚焦时，阻止事件冒泡，防止关闭搜索框 + const aaa=()=>{} + const currentPage=()=>{ + console.log(activeName.value); + } return { searchData, activeName, + aaa, + currentPage }; }, }; @@ -31,25 +39,27 @@ export default { padding: 12px; } .el-input { - box-sizing: border-box; - height: 30px; - line-height: 30px; - border: solid 2px #0e60e4; - border-radius: 6px; - background: #fefefe; - padding: 0 10px; ::v-deep .el-input__inner { - height: 100%; - line-height: 100%; + height: 34px; + line-height: 34px; + border: solid 2px #0e60e4; background-image: url("~@/assets/img/icon/ui/search.png"); background-repeat: no-repeat; background-size: 18px 18px; - background-position: left center; - border: none; + background-position: 10px center; background-color: rgba(255, 255, 255, 0); + padding-left: 35px; } } -.el-tabs{ +::v-deep .el-tabs{ border-bottom: none; + padding: 0 8px; + .el-tabs__item{ + font-size: 13px; + } + .el-tabs__header, + .el-tabs__nav-wrap{ + position: static; + } } \ No newline at end of file -- Gitee