|
|
@@ -1,26 +1,22 @@
|
|
|
<template>
|
|
|
<div class="working">
|
|
|
- <van-search
|
|
|
- v-model="keyword"
|
|
|
- :placeholder="$t('common.pleaseEnterKeywords')"
|
|
|
- @update:model-value="searchFn"
|
|
|
- />
|
|
|
+ <van-search v-model="keyword" :placeholder="$t('common.pleaseEnterKeywords')" @update:model-value="searchFn" />
|
|
|
<van-swipe class="my-swipe" indicator-color="white" style="margin-top:10px">
|
|
|
<van-swipe-item @click="toWinfaster">
|
|
|
<img src="../../assets/images/banner1.png" alt="">
|
|
|
</van-swipe-item>
|
|
|
<van-swipe-item>2</van-swipe-item>
|
|
|
</van-swipe>
|
|
|
-
|
|
|
+
|
|
|
<div class="card" v-if="keyword">
|
|
|
<div class="title">{{$t('common.searchResults')}}</div>
|
|
|
<ul>
|
|
|
<li v-for="j in searchList" :key="j.path" @click="toRouter(j)" :style="colorRgb(j.background || '#0084FF',0.1)">
|
|
|
- <div class="icon" :style="colorRgb(j.background || '#0084FF',1)">
|
|
|
- <i class="iconfont" :class="'icon-' + j.meta.icon" ></i>
|
|
|
-
|
|
|
+ <div class="icon" :style="colorRgb(j.background || '#0084FF',1)">
|
|
|
+ <i class="iconfont" :class="'icon-' + j.meta.icon"></i>
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="yuan" :style="colorRgb(j.background || '#0084FF',0.2)"></div>
|
|
|
<div class="text">{{ j.meta.title }}</div>
|
|
|
</li>
|
|
|
@@ -31,11 +27,11 @@
|
|
|
<div class="title">{{ i.meta.title }}</div>
|
|
|
<ul>
|
|
|
<li v-for="j in i.children" :key="j.path" @click="toRouter(j)" :style="colorRgb(j.background || '#0084FF',0.1)">
|
|
|
- <div class="icon" :style="colorRgb(j.background || '#0084FF',1)">
|
|
|
- <i class="iconfont" :class="'icon-' + j.meta.icon" ></i>
|
|
|
-
|
|
|
+ <div class="icon" :style="colorRgb(j.background || '#0084FF',1)">
|
|
|
+ <i class="iconfont" :class="'icon-' + j.meta.icon"></i>
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="yuan" :style="colorRgb(j.background || '#0084FF',0.2)"></div>
|
|
|
<div class="text">{{ j.meta.title }}</div>
|
|
|
</li>
|
|
|
@@ -44,13 +40,13 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name:'working'
|
|
|
- }
|
|
|
+export default {
|
|
|
+ name: "working",
|
|
|
+};
|
|
|
</script>
|
|
|
<script setup name="working">
|
|
|
import { nextTick } from "vue";
|
|
|
-import { ref, reactive, getCurrentInstance, toRaw,onActivated } from "vue";
|
|
|
+import { ref, reactive, getCurrentInstance, toRaw, onActivated } from "vue";
|
|
|
const proxy = getCurrentInstance().proxy;
|
|
|
console.log(toRaw(proxy), "asss");
|
|
|
const routerData = ref([]);
|
|
|
@@ -58,13 +54,11 @@ const getRouter = () => {
|
|
|
proxy.get("getRouters", {}).then((res) => {
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
const element = res.data[i];
|
|
|
- if(element.type == 2){
|
|
|
-
|
|
|
+ if (element.type == 2) {
|
|
|
routerData.value = element.children;
|
|
|
- console.log(routerData.value)
|
|
|
+ console.log(routerData.value);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
});
|
|
|
};
|
|
|
|
|
|
@@ -72,23 +66,22 @@ const keyword = ref(null);
|
|
|
const searchList = ref([]);
|
|
|
const searchFn = (text) => {
|
|
|
searchList.value = [];
|
|
|
- if(!text) return
|
|
|
+ if (!text) return;
|
|
|
//在routerData中查找
|
|
|
- routerData.value.map(item => {
|
|
|
- item.children.map(item => {
|
|
|
- if(item.meta.title.indexOf(text) > -1){
|
|
|
- searchList.value.push(item)
|
|
|
+ routerData.value.map((item) => {
|
|
|
+ item.children.map((item) => {
|
|
|
+ if (item.meta.title.indexOf(text) > -1) {
|
|
|
+ searchList.value.push(item);
|
|
|
}
|
|
|
- })
|
|
|
-
|
|
|
- })
|
|
|
- console.log(searchList)
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log(searchList);
|
|
|
};
|
|
|
getRouter();
|
|
|
const toWinfaster = () => {
|
|
|
- proxy.$router.push({
|
|
|
- path: "/main/iframWinfaster",
|
|
|
- });
|
|
|
+ // proxy.$router.push({
|
|
|
+ // path: "/main/iframWinfaster",
|
|
|
+ // });
|
|
|
};
|
|
|
//16进制转rgba的函数
|
|
|
const colorRgb = (sColor, alpha) => {
|
|
|
@@ -98,9 +91,7 @@ const colorRgb = (sColor, alpha) => {
|
|
|
if (sColor.length === 4) {
|
|
|
var sColorNew = "#";
|
|
|
for (var i = 1; i < 4; i += 1) {
|
|
|
- sColorNew += sColor
|
|
|
- .slice(i, i + 1)
|
|
|
- .concat(sColor.slice(i, i + 1));
|
|
|
+ sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
|
|
|
}
|
|
|
sColor = sColorNew;
|
|
|
}
|
|
|
@@ -109,9 +100,7 @@ const colorRgb = (sColor, alpha) => {
|
|
|
for (var i = 1; i < 7; i += 2) {
|
|
|
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
|
|
|
}
|
|
|
- return (
|
|
|
- "background:rgba(" + sColorChange.join(",") + "," + alpha + ")"
|
|
|
- );
|
|
|
+ return "background:rgba(" + sColorChange.join(",") + "," + alpha + ")";
|
|
|
} else {
|
|
|
return sColor;
|
|
|
}
|
|
|
@@ -119,8 +108,10 @@ const colorRgb = (sColor, alpha) => {
|
|
|
const toRouter = (item) => {
|
|
|
//获取class为main的滚动条位置
|
|
|
|
|
|
-
|
|
|
- sessionStorage.setItem("scrollTop", document.querySelector('#main').scrollTop);
|
|
|
+ sessionStorage.setItem(
|
|
|
+ "scrollTop",
|
|
|
+ document.querySelector("#main").scrollTop
|
|
|
+ );
|
|
|
proxy.$router.push(item.path);
|
|
|
};
|
|
|
|
|
|
@@ -128,10 +119,8 @@ const toRouter = (item) => {
|
|
|
onActivated(() => {
|
|
|
const scrollTop = sessionStorage.getItem("scrollTop");
|
|
|
nextTick(() => {
|
|
|
- document.querySelector('#main').scrollTop = scrollTop;
|
|
|
+ document.querySelector("#main").scrollTop = scrollTop;
|
|
|
});
|
|
|
-
|
|
|
-
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -140,22 +129,22 @@ onActivated(() => {
|
|
|
padding: 12px;
|
|
|
color: #333;
|
|
|
position: relative;
|
|
|
- top:-46px;
|
|
|
-
|
|
|
- .my-swipe{
|
|
|
+ top: -46px;
|
|
|
+
|
|
|
+ .my-swipe {
|
|
|
height: 150px;
|
|
|
background: #0084ff;
|
|
|
color: #fff;
|
|
|
border-radius: 5px;
|
|
|
text-align: center;
|
|
|
- .van-swipe-item{
|
|
|
+ .van-swipe-item {
|
|
|
height: 150px;
|
|
|
text-align: center;
|
|
|
line-height: 150px;
|
|
|
- img{
|
|
|
+ img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.card {
|
|
|
@@ -191,7 +180,7 @@ onActivated(() => {
|
|
|
|
|
|
li {
|
|
|
width: 23%;
|
|
|
-
|
|
|
+
|
|
|
padding: 12px;
|
|
|
margin: 10px 1% 0;
|
|
|
box-sizing: border-box;
|
|
|
@@ -209,7 +198,7 @@ onActivated(() => {
|
|
|
font-size: 14px;
|
|
|
z-index: 2;
|
|
|
position: relative;
|
|
|
- .iconfont{
|
|
|
+ .iconfont {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
@@ -217,7 +206,7 @@ onActivated(() => {
|
|
|
font-size: 12px;
|
|
|
height: 26px;
|
|
|
line-height: 14px;
|
|
|
- margin-top:12px;
|
|
|
+ margin-top: 12px;
|
|
|
color: #333;
|
|
|
font-weight: bold;
|
|
|
position: relative;
|
|
|
@@ -228,9 +217,8 @@ onActivated(() => {
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-
|
|
|
}
|
|
|
- .yuan{
|
|
|
+ .yuan {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
border-radius: 50%;
|
cz