Skip to content

S
smart_gov_platform
Commit 7fcf002a authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf: 修改皮肤分辨率适配

parent 3d0d8e24
Show whitespace changes
Inline Side-by-side
Showing with 193 additions and 95 deletions
base-manager-ui/admin/src/pages/basicset/surface/appraiseskin/AppraiseSkin.vue
View file @ 7fcf002a
......@@ -4,7 +4,7 @@
<div
:id="componentsId"
class="call-out-skin-across"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
:style="{
background: filterItem('1', 0),
}"
......@@ -76,6 +76,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -87,7 +90,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -99,36 +102,14 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤图片
// filterImg(val) {
// let url = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "2";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// url = v.fieldValue;
// }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
......
base-manager-ui/admin/src/pages/basicset/surface/calloutskin/CallOutSkin.vue
View file @ 7fcf002a
......@@ -4,7 +4,7 @@
<div
:id="componentsId"
class="call-out-skin-across"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
:style="{
background: filterItem('1', 0),
}"
......@@ -131,6 +131,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -142,7 +145,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -154,6 +157,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/centralizeskin/CentralizeSkin.vue
View file @ 7fcf002a
......@@ -4,7 +4,7 @@
<div
class="centralize-across"
:id="componentsId"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
:style="{
background: filterItem('1', 0),
}"
......@@ -84,7 +84,7 @@
<div
class="vertical-skin"
:id="componentsId"
v-else-if="imageResolution === '2'"
v-else-if="resolution === '1080x1920'"
:style="{
background: filterItem('1', 0),
}"
......@@ -195,6 +195,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -206,7 +209,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -250,36 +253,14 @@ export default {
],
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤图片
// filterImg(val) {
// let url = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "2";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// url = v.fieldValue;
// }
// });
// return url;
// },
// // 过滤颜色
// filterColor(val) {
// let str = "";
// this.skinFieldList
// .filter((v) => {
// return v.fieldType === "1";
// })
// .forEach((v) => {
// if (v.fieldName !== "" && v.fieldName === val) {
// str = v.fieldValue;
// }
// });
// return str;
// },
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
......
base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue
View file @ 7fcf002a
......@@ -22,9 +22,12 @@
v-for="(v, i) in previewList"
:key="v.id"
>
<!-- <div class="resolution">
{{ v.imageResolution }}
</div> -->
<img :src="v.previewImagePath" />
<div class="name">
{{ v.name }}
{{ v.name }}-{{ filterItems(v.imageResolution, imageResolution) }}
</div>
</div>
</div>
......@@ -44,6 +47,7 @@
import { getSkinList } from "@/services/surface";
import { Empty } from "ant-design-vue";
import { mapMutations, mapState } from "vuex";
import { filterItems } from "@/utils";
export default {
props: {
classifyList: {
......@@ -56,6 +60,7 @@ export default {
},
data() {
return {
filterItems,
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
categoryId: "", // 分类ID
previewList: [], // 皮肤列表
......@@ -63,7 +68,7 @@ export default {
};
},
computed: {
...mapState("site", ["curSkinIndex", "curProduct"]),
...mapState("site", ["curSkinIndex", "curProduct", "imageResolution"]),
},
watch: {
curProduct(newVal) {
......@@ -190,18 +195,31 @@ export default {
height: 100%;
object-fit: contain;
}
.name {
.resolution {
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
position: absolute;
left: 0px;
bottom: 0px;
top: 0px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.name {
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
position: absolute;
left: 0px;
bottom: 0px;
text-align: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
.active {
border: 4px solid #ff8522;
......
base-manager-ui/admin/src/pages/basicset/surface/defaultshow/DefaultShow.vue
View file @ 7fcf002a
......@@ -4,7 +4,7 @@
<div
:id="componentsId"
class="across-skin"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
:style="{
background: filterItem('1', 0),
}"
......@@ -13,7 +13,7 @@
<div
class="vertical-skin"
:id="componentsId"
v-else-if="imageResolution === '2'"
v-else-if="resolution === '1080x1920'"
:style="{
background: filterItem('1', 0),
}"
......@@ -33,6 +33,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
// imgItem: {
......@@ -51,7 +54,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -63,6 +66,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/desSelfservice/DesSelfService.vue
View file @ 7fcf002a
......@@ -3,7 +3,7 @@
<!-- 桌面自助服务终端 横板 -->
<div
:id="componentsId"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
class="across-skin flex flexc aic"
:style="{
background: filterItem('1', 0),
......@@ -95,6 +95,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -106,13 +109,20 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
type: String,
},
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
data() {
return {
api: process.env.VUE_APP_API_IMG_URL,
......
base-manager-ui/admin/src/pages/basicset/surface/infoDisSkin/InfoDisSkin.vue
View file @ 7fcf002a
......@@ -4,7 +4,7 @@
<div
class="vertical-skin flex flexc aic"
:id="componentsId"
v-if="imageResolution === '2'"
v-if="resolution === '1080x1920'"
:style="{
background: filterItem('1', 0),
}"
......@@ -51,6 +51,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
// imgItem: {
......@@ -69,7 +72,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -81,6 +84,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/informationskin/InformationSkin.vue
View file @ 7fcf002a
......@@ -4,7 +4,7 @@
<div
:id="componentsId"
class="across-skin flex flexc"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
>
<div
class="header"
......@@ -56,7 +56,7 @@
<div
:id="componentsId"
class="vertical-skin flex flexc"
v-else-if="imageResolution === '2'"
v-else-if="resolution === '1080x1920'"
>
<div
class="header"
......@@ -69,7 +69,7 @@
</div>
<div class="main">
<div class="left">
<img class="banner" src="../../../../assets/img/banner2.png" />
<img class="banner" src="../../../../assets/img/pjq.png" />
</div>
<div class="right">
<img class="banner" src="../../../../assets/img/banner3.png" />
......@@ -110,6 +110,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -121,7 +124,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -133,6 +136,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/modal/AddSurface.vue
View file @ 7fcf002a
......@@ -244,7 +244,7 @@ export default {
formData: {
categoryId: undefined, // 所属种类
name: "", // 皮肤名称
imageResolution: "1", // 分辨率
imageResolution: undefined, // 分辨率
skinFieldList: [], // 字段属性列表
previewImagePath: "", // 预览图地址
},
......@@ -469,6 +469,7 @@ export default {
onAdd() {
Object.assign(this.formData, this.$options.data().formData);
this.formData.id && this.$delete(this.formData, "id");
this.formData.imageResolution = Object.keys(this.imageResolution)[0];
},
// 编辑
onEdit(row) {
......
base-manager-ui/admin/src/pages/basicset/surface/queuingSkin/LandscapeMode.vue
View file @ 7fcf002a
......@@ -4,7 +4,7 @@
<div
:id="componentsId"
class="across-skin"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
:style="{
background: filterItem('1', 0),
}"
......@@ -73,7 +73,7 @@
<div
class="vertical-skin"
:id="componentsId"
v-else-if="imageResolution === '2'"
v-else-if="resolution === '1080x1920'"
:style="{
background: filterItem('1', 0),
}"
......@@ -87,7 +87,7 @@
</div>
</div>
<div class="banner">
<img src="../../../../assets/img/Banner.png" alt="" />
<img src="../../../../assets/img/pjq.png" alt="" />
</div>
<div class="meuns flex flexwrap jcb">
<div
......@@ -150,6 +150,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
// imgItem: {
......@@ -168,7 +171,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -180,6 +183,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/sampleFormSkin/SampleFormSkin.vue
View file @ 7fcf002a
......@@ -3,7 +3,7 @@
<!-- 样表机 横板 -->
<div
:id="componentsId"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
class="sample_form_skin flex flexc aic"
:style="{
background: filterItem('1', 0),
......@@ -133,6 +133,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -144,7 +147,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -156,6 +159,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/selfservice/SelfService.vue
View file @ 7fcf002a
......@@ -3,7 +3,7 @@
<!-- 自助服务终端 横板 -->
<div
:id="componentsId"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
class="across-skin flex flexc aic"
:style="{
background: filterItem('1', 0),
......@@ -95,6 +95,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -106,7 +109,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -118,6 +121,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/signdeviceskin/SignDeviceSkin.vue
View file @ 7fcf002a
......@@ -3,7 +3,7 @@
<!-- 导视机 横板 -->
<div
:id="componentsId"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
class="across-skin flex flexc aic"
>
<!-- 头部 -->
......@@ -74,6 +74,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -85,7 +88,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -97,6 +100,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/windowskin/WindowSkin.vue
View file @ 7fcf002a
......@@ -4,7 +4,7 @@
<div
:id="componentsId"
class="window-skin-across flex flexc jcb aic"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
:style="{
background: filterItem('1', 0),
}"
......@@ -64,6 +64,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -75,7 +78,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -87,6 +90,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/pages/basicset/surface/writeFormSkin/WriteFormSkin.vue
View file @ 7fcf002a
......@@ -3,7 +3,7 @@
<!-- 填单机 横板 -->
<div
:id="componentsId"
v-if="imageResolution === '1'"
v-if="resolution === '1920x1080'"
class="write_form_skin flex flexc aic"
:style="{
background: filterItem('1', 0),
......@@ -155,6 +155,9 @@
</template>
<script>
import { unifyResolution } from "@/utils";
import { filterItems } from "@/utils";
import { mapGetters } from "vuex";
export default {
props: {
skinFieldList: {
......@@ -166,7 +169,7 @@ export default {
},
imageResolution: {
required: true,
default: "1",
default: "",
},
componentsId: {
required: true,
......@@ -178,6 +181,13 @@ export default {
api: process.env.VUE_APP_API_IMG_URL,
};
},
computed: {
...mapGetters("site", ["imageResolutions"]),
resolution() {
let data = filterItems(this.imageResolution, this.imageResolutions);
return unifyResolution(data);
},
},
methods: {
// 过滤属性类型
filterItem(type, index) {
......
base-manager-ui/admin/src/store/modules/site.js
View file @ 7fcf002a
......@@ -39,6 +39,9 @@ export default {
siteId(state) {
return state.siteId;
},
imageResolutions(state) {
return state.imageResolution;
},
},
mutations: {
SET_path(state, path) {
......
base-manager-ui/admin/src/utils/index.js
View file @ 7fcf002a
......@@ -17,3 +17,7 @@ export const transverter = (obj) => {
};
});
};
// 统一分辨率格式
export const unifyResolution = (resolution) => {
return resolution.replace(/[xX*]/, "x");
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment