Skip to content

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

feat:新增样表机、填单机皮肤设置

parent b5e8e1df
Hide whitespace changes
Inline Side-by-side
Showing with 767 additions and 152 deletions
base-manager-ui/admin/src/assets/css/common.css
View file @ f104aa85
......@@ -213,3 +213,10 @@
.fontw800{
font-weight:800;
}
.skin-box {
height: 100%;
}
.empty {
height: 100%;
}
\ No newline at end of file
base-manager-ui/admin/src/pages/basicset/surface/appraiseskin/AppraiseSkin.vue
View file @ f104aa85
<template>
<div>
<div class="skin-box">
<!-- 评价器 横板皮肤 -->
<div
:id="conponentsId"
class="call-out-skin-across"
v-if="imageResolution === '1'"
:style="{
background: filterItem('1', 0),
}"
......@@ -96,6 +97,17 @@
></div> -->
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
<a-empty
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
</div>
</div>
</template>
......@@ -120,9 +132,7 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL.includes("base")
? process.env.VUE_APP_API_BASE_URL.replace("base", "")
: process.env.VUE_APP_API_BASE_URL + "/",
api: process.env.VUE_APP_API_BASE_URL + "/",
};
},
methods: {
......
base-manager-ui/admin/src/pages/basicset/surface/calloutskin/CallOutSkin.vue
View file @ f104aa85
<template>
<div>
<div class="skin-box">
<!-- 呼叫器 横板皮肤 -->
<div
:id="conponentsId"
class="call-out-skin-across"
v-if="imageResolution === '1'"
:style="{
background: filterItem('1', 0),
}"
......@@ -122,6 +123,17 @@
</div>
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
<a-empty
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
</div>
</div>
</template>
......@@ -146,9 +158,7 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL.includes("base")
? process.env.VUE_APP_API_BASE_URL.replace("base", "")
: process.env.VUE_APP_API_BASE_URL + "/",
api: process.env.VUE_APP_API_BASE_URL + "/",
};
},
methods: {
......
base-manager-ui/admin/src/pages/basicset/surface/centralizeskin/CentralizeSkin.vue
View file @ f104aa85
<template>
<div>
<div class="skin-box">
<!-- 集中显示屏 横板 -->
<div
class="centralize-across"
:id="conponentsId"
v-if="imageResolution === '1'"
:style="{
background: filterItem('1', 0),
}"
......@@ -156,6 +157,17 @@
</div>
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
<a-empty
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
</div>
</div>
</template>
......@@ -180,9 +192,7 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL.includes("base")
? process.env.VUE_APP_API_BASE_URL.replace("base", "")
: process.env.VUE_APP_API_BASE_URL + "/",
api: process.env.VUE_APP_API_BASE_URL + "/",
};
},
methods: {
......
base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue
View file @ f104aa85
......@@ -54,6 +54,8 @@ import CallOutSkin from "../calloutskin/CallOutSkin.vue";
import WindowSkin from "../windowskin/WindowSkin.vue";
import CentralizeSkin from "../centralizeskin/CentralizeSkin.vue";
import AppraiseSkin from "../appraiseskin/AppraiseSkin.vue";
import SampleFormSkin from "../sampleFormSkin/SampleFormSkin.vue";
import WriteFormSkin from "../writeFormSkin/WriteFormSkin.vue";
export default {
components: {
LandscapeMode,
......@@ -61,6 +63,8 @@ export default {
WindowSkin,
CentralizeSkin,
AppraiseSkin,
SampleFormSkin,
WriteFormSkin,
},
props: {},
data() {
......@@ -98,6 +102,15 @@ export default {
case 6:
str = "AppraiseSkin";
break;
case 7:
// str = "AppraiseSkin";
break;
case 8:
str = "WriteFormSkin";
break;
case 9:
str = "SampleFormSkin";
break;
}
return str;
},
......
base-manager-ui/admin/src/pages/basicset/surface/modal/AddSurface.vue
View file @ f104aa85
......@@ -98,70 +98,72 @@
</a-form-model-item>
</a-col>
</a-row>
<a-row v-if="formData.skinFieldList.length">
<!-- 背景图 -->
<a-col
:span="12"
v-for="(v, i) in formData.skinFieldList"
v-show="v.fieldType == '2'"
:key="v.id"
>
<a-form-model-item
:label-col="{ span: 10 }"
:wrapper-col="{ span: 14 }"
:label="v.fieldName"
:prop="`skinFieldList.${i}.fieldValue`"
:rules="rules.fieldValue"
<a-spin :spinning="formLoading">
<a-row v-if="formData.skinFieldList.length">
<!-- 背景图 -->
<a-col
:span="12"
v-for="(v, i) in formData.skinFieldList"
v-show="v.fieldType == '2'"
:key="v.id"
>
<a-upload
name="file"
action="file/commonupload"
:before-upload="beforeUpload"
:show-upload-list="false"
:data="{
name: v.fieldName,
prop: `skinFieldList.${i}.fieldValue`,
}"
:customRequest="handleChangeBg"
<a-form-model-item
:label-col="{ span: 10 }"
:wrapper-col="{ span: 14 }"
:label="v.fieldName"
:prop="`skinFieldList.${i}.fieldValue`"
:rules="rules.fieldValue"
>
<a-button class="upload-btn">
<a-icon type="upload" /> 点击上传
</a-button>
</a-upload>
</a-form-model-item>
</a-col>
<a-upload
name="file"
action="file/commonupload"
:before-upload="beforeUpload"
:show-upload-list="false"
:data="{
name: v.fieldName,
prop: `skinFieldList.${i}.fieldValue`,
}"
:customRequest="handleChangeBg"
>
<a-button class="upload-btn">
<a-icon type="upload" /> 点击上传
</a-button>
</a-upload>
</a-form-model-item>
</a-col>
<!-- 颜色 -->
<a-col
:span="24"
v-for="(v, i) in formData.skinFieldList"
v-show="v.fieldType === '1'"
:key="v.createTime"
>
<a-form-model-item
:label="v.fieldName"
:prop="`skinFieldList.${i}.fieldValue`"
:rules="rules.fieldValue"
<!-- 颜色 -->
<a-col
:span="24"
v-for="(v, i) in formData.skinFieldList"
v-show="v.fieldType === '1'"
:key="v.createTime"
>
<span class="color-show">{{
v.fieldValue ? v.fieldValue : "--"
}}</span>
<a-button class="select-color-btn">
选择颜色
<input
type="color"
class="color-ipt"
v-model="v.fieldValue"
/>
</a-button>
</a-form-model-item>
</a-col>
</a-row>
<a-empty
v-else
description="暂无皮肤字段属性"
:image="simpleImage"
/>
<a-form-model-item
:label="v.fieldName"
:prop="`skinFieldList.${i}.fieldValue`"
:rules="rules.fieldValue"
>
<span class="color-show">{{
v.fieldValue ? v.fieldValue : "--"
}}</span>
<a-button class="select-color-btn">
选择颜色
<input
type="color"
class="color-ipt"
v-model="v.fieldValue"
/>
</a-button>
</a-form-model-item>
</a-col>
</a-row>
<a-empty
v-else
description="暂无皮肤字段属性"
:image="simpleImage"
/>
</a-spin>
</a-form-model>
</div>
<div class="btn-box">
......@@ -191,6 +193,8 @@ import CallOutSkin from "../calloutskin/CallOutSkin.vue";
import WindowSkin from "../windowskin/WindowSkin.vue";
import CentralizeSkin from "../centralizeskin/CentralizeSkin.vue";
import AppraiseSkin from "../appraiseskin/AppraiseSkin.vue";
import SampleFormSkin from "../sampleFormSkin/SampleFormSkin.vue";
import WriteFormSkin from "../writeFormSkin/WriteFormSkin.vue";
import { uploadFile, skinSave, getTemplateList } from "@/services/surface";
import html2canvas from "html2canvas";
import { Empty } from "ant-design-vue";
......@@ -202,6 +206,8 @@ export default {
WindowSkin,
CentralizeSkin,
AppraiseSkin,
SampleFormSkin,
WriteFormSkin,
},
props: {
isShow: {
......@@ -220,10 +226,11 @@ export default {
data() {
return {
loading: false,
formLoading: false,
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
facilityInfo: {}, // 设备信息
skinTemplate: [], // 皮肤模板列表
curSkinTemplate: "", //当前选择皮肤模板
curSkinTemplate: undefined, //当前选择皮肤模板
isEdit: false, // 是否编辑状态
formData: {
categoryId: undefined, // 所属种类
......@@ -280,6 +287,15 @@ export default {
case 6:
str = "AppraiseSkin";
break;
case 7:
// str = "AppraiseSkin";
break;
case 8:
str = "WriteFormSkin";
break;
case 9:
str = "SampleFormSkin";
break;
}
return str;
},
......@@ -303,6 +319,8 @@ export default {
this.$refs.formData && this.$refs.formData.resetFields();
this.isEdit = false;
this.show = false;
this.skinTemplate = [];
this.curSkinTemplate = undefined;
},
// 获取设备信息
getFacilityInfo(info) {
......@@ -310,6 +328,7 @@ export default {
},
// 获取皮肤模板
async getTemplateList(search = {}) {
this.formLoading = true;
let res = await getTemplateList({
page: 1,
size: -1,
......@@ -317,7 +336,7 @@ export default {
...search,
});
let { data } = res.data.data;
console.log(data);
this.formLoading = false;
if (data.length) {
data.forEach((v) => {
for (let item of v.skinFieldList) {
......@@ -333,6 +352,7 @@ export default {
this.skinTemplate = data;
// this.formData.skinFieldList = this.skinTemplate[0].skinFieldList;
this.curSkinTemplate = this.skinTemplate[0].id;
console.log(data);
}
},
// 上传函数
......@@ -406,15 +426,13 @@ export default {
...this.facilityInfo,
...this.formData,
});
this.loading = false;
let { code, msg } = res.data;
if (code === 1) {
this.$message.success(msg);
this.$emit("addSkinSuccess");
this.$refs.formData.resetFields();
this.loading = false;
this.show = false;
} else {
this.loading = false;
}
});
}
......@@ -479,7 +497,7 @@ export default {
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #939392;
background: rgba(144, 147, 153, 0.5);
}
&::-webkit-scrollbar-track {
box-shadow: 0;
......
base-manager-ui/admin/src/pages/basicset/surface/queuingSkin/LandscapeMode.vue
View file @ f104aa85
<template>
<div>
<div class="skin-box">
<!-- 排号机 1920*1080 -->
<div
:id="conponentsId"
......@@ -67,15 +67,16 @@
</div>
</div>
<!-- 空数据显示 -->
<a-empty
v-else
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
<div class="empty flex aic jcc" v-else>
<a-empty
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
</div>
</div>
</template>
......@@ -107,40 +108,10 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL.includes("base")
? process.env.VUE_APP_API_BASE_URL.replace("base", "")
: process.env.VUE_APP_API_BASE_URL + "/",
api: process.env.VUE_APP_API_BASE_URL + "/",
};
},
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/sampleFormSkin/SampleFormSkin.vue 0 → 100644
View file @ f104aa85
<template>
<div class="skin-box">
<!-- 样表机 横板 -->
<div
:id="conponentsId"
v-if="imageResolution === '1'"
class="sample_form_skin flex flexc aic"
:style="{
background: filterItem('1', 0),
}"
>
<!-- 头部 -->
<div class="header flex aic jcb">
<div class="left flex aic">
<img class="mr20" src="../../../../assets/img/logo.png" />
<div
class="title"
:style="{
color: filterItem('2', 0),
}"
>
政务服务中心
</div>
</div>
<div class="right flex aic">
<div class="flex aic mr10">
<span
:style="{
color: filterItem('2', 0),
}"
>今日节约能量：</span
>
<div class="count">66g</div>
</div>
<div class="flex aic">
<span
:style="{
color: filterItem('2', 0),
}"
>累计节约能量：</span
>
<div class="count">666kg</div>
</div>
</div>
</div>
<!-- 标题 -->
<img class="title-img" src="../../../../assets/img/yangbiao.png" alt="" />
<!-- 搜索框 -->
<div class="search-box">
<div
class="search-box-btn flex aic jcc"
:style="{
background: `linear-gradient(90deg, ${filterItem(
'7',
0
)}, ${filterItem('8', 0)})`,
}"
>
<img src="../../../../assets/img/sousuo.png" />
搜索
</div>
</div>
<!-- 热门词汇 -->
<div class="hot-text">
<span>热门词汇：</span>
</div>
<!-- 主体内容 -->
<div class="main flex aic jcb">
<div class="left">热门表单区域</div>
<div class="right flex flexc jcb">
<div
class="top flex aic jcc"
:style="{
background: filterItem('4', 0),
}"
:class="{ border: !filterItem('4', 0) }"
>
btn1
</div>
<div class="bottom flex aic jcc">热门事项</div>
</div>
</div>
<!-- 底部 -->
<div class="footer flex aic mt20">
<div class="flex1 tac">
<span class="">入驻表单量：</span>
<span>20份</span>
</div>
<div class="flex1 tac">
<span class="">入驻事项量：</span>
<span>20件</span>
</div>
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
<a-empty
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
</div>
</div>
</template>
<script>
export default {
props: {
skinFieldList: {
type: Array,
required: true,
default: () => {
return [];
},
},
imageResolution: {
required: true,
default: "1",
},
conponentsId: {
required: true,
type: String,
},
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
};
},
methods: {
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
});
if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
},
// 过滤属性值类型
filterValueType(info = {}) {
let value = "";
if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
value = info.fieldValue;
} else if (
info.fieldType !== "" &&
info.fieldType === "2" &&
info.fieldValue
) {
value = `url(${this.api + info.fieldValue})`;
}
return value;
},
},
};
</script>
<style lang="less" scoped>
.sample_form_skin {
width: 1000px;
height: 562.5px;
padding: 20px;
background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat !important ;
background-position: center !important ;
background-size: cover !important ;
.header {
width: 100%;
color: #fff;
.title {
font-size: 30px;
font-weight: 600;
}
.right {
.count {
width: 50px;
height: 50px;
background: url("../../../../assets/img/pic_png_nengliang.png")
no-repeat center;
background-size: 100% 100%;
color: #317054;
text-align: center;
line-height: 50px;
}
}
}
.title-img {
width: 600px;
margin-top: 20px;
}
.search-box {
width: 600px;
height: 38px;
margin-top: 20px;
background: #ffffff;
box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
border-radius: 8px;
position: relative;
.search-box-btn {
width: 70px;
height: 30px;
background: linear-gradient(90deg, #0857e8, #59d1fe);
border-radius: 4px;
color: #fff;
position: absolute;
right: 4px;
top: 4px;
img {
width: 18px;
margin-right: 6px;
}
}
}
.hot-text {
width: 600px;
margin-top: 10px;
color: #fff;
}
.main {
width: 800px;
height: 250px;
margin-top: 10px;
color: #fff;
.left {
width: 54%;
height: 100%;
border: 1px dashed #ececec;
border-radius: 4px;
text-align: center;
line-height: 200px;
}
.right {
width: 44%;
height: 100%;
border-radius: 4px;
.top {
height: 40%;
width: 100%;
border-radius: 4px;
background-size: 100% 100% !important;
}
.border {
border: 1px dashed #ececec;
}
.bottom {
height: 58%;
width: 100%;
border: 1px dashed #ececec;
border-radius: 4px;
}
}
}
.footer {
width: 800px;
color: #fff;
}
}
</style>
\ No newline at end of file
base-manager-ui/admin/src/pages/basicset/surface/windowskin/WindowSkin.vue
View file @ f104aa85
<template>
<div>
<div class="skin-box">
<!-- 窗口屏 横板 -->
<div
:id="conponentsId"
class="window-skin-across flex jcb aic"
v-if="imageResolution === '1'"
:style="{
background: filterItem('1', 0),
}"
......@@ -58,6 +59,17 @@
<div class="footer-banner">Banner展示区</div>
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
<a-empty
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
</div>
</div>
</template>
......@@ -82,41 +94,10 @@ export default {
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL.includes("base")
? process.env.VUE_APP_API_BASE_URL.replace("base", "")
: process.env.VUE_APP_API_BASE_URL + "/",
api: process.env.VUE_APP_API_BASE_URL + "/",
};
},
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/writeFormSkin/WriteFormSkin.vue 0 → 100644
View file @ f104aa85
<template>
<div class="skin-box">
<!-- 样表机 横板 -->
<div
:id="conponentsId"
v-if="imageResolution === '1'"
class="sample_form_skin flex flexc aic"
:style="{
background: filterItem('1', 0),
}"
>
<!-- 头部 -->
<div class="header flex aic jcb">
<div class="left flex aic">
<img class="mr20" src="../../../../assets/img/logo.png" />
<div
class="title"
:style="{
color: filterItem('2', 0),
}"
>
政务服务中心
</div>
</div>
<div class="right flex aic">
<div class="flex aic mr10">
<span
:style="{
color: filterItem('2', 0),
}"
>今日节约能量：</span
>
<div class="count">66g</div>
</div>
<div class="flex aic">
<span
:style="{
color: filterItem('2', 0),
}"
>累计节约能量：</span
>
<div class="count">666kg</div>
</div>
</div>
</div>
<!-- 标题 -->
<img class="title-img" src="../../../../assets/img/tiandan.png" alt="" />
<!-- 搜索框 -->
<div class="search-box">
<div
class="search-box-btn flex aic jcc"
:style="{
background: `linear-gradient(90deg, ${filterItem(
'7',
0
)}, ${filterItem('8', 0)})`,
}"
>
<img src="../../../../assets/img/sousuo.png" />
搜索
</div>
</div>
<!-- 热门词汇 -->
<div class="hot-text">
<span>热门词汇：</span>
</div>
<!-- 主体内容 -->
<div class="main flex aic jcb">
<div class="left">热门排行区域</div>
<div class="right flex flexc jcb">
<div class="top flex aic jcb">
<div
class="btn1 flex jcc aic"
:style="{
background: filterItem('4', 0),
}"
:class="{ border: !filterItem('4', 0) }"
>
btn1
</div>
<div
class="btn2 flex jcc aic"
:style="{
background: filterItem('4', 1),
}"
:class="{ border: !filterItem('4', 1) }"
>
btn2
</div>
</div>
<div class="bottom flex aic jcc">应用区域</div>
</div>
</div>
<!-- 底部 -->
<div class="footer flex aic jca mt20">
<div class="flex flexc aic">
<span
:style="{
color: filterItem('5', 0),
}"
>入驻表单量</span
>
<span
:style="{
color: filterItem('7', 0),
}"
>20份</span
>
</div>
<div class="flex flexc aic">
<span
:style="{
color: filterItem('5', 0),
}"
>入驻事项量</span
>
<span
:style="{
color: filterItem('7', 0),
}"
>20件</span
>
</div>
<div class="flex flexc aic">
<span
:style="{
color: filterItem('5', 0),
}"
>本地打印量</span
>
<span
:style="{
color: filterItem('7', 0),
}"
>20次</span
>
</div>
<div class="flex flexc aic">
<span
:style="{
color: filterItem('5', 0),
}"
>在线提交量</span
>
<span
:style="{
color: filterItem('7', 0),
}"
>20次</span
>
</div>
</div>
</div>
<!-- 空数据显示 -->
<div class="empty flex aic jcc" v-else>
<a-empty
:image="require('../../../../assets/img/original.png')"
:image-style="{
height: '80px',
}"
>
<span slot="description"> <a href="#API">暂无皮肤模板</a> </span>
</a-empty>
</div>
</div>
</template>
<script>
export default {
props: {
skinFieldList: {
type: Array,
required: true,
default: () => {
return [];
},
},
imageResolution: {
required: true,
default: "1",
},
conponentsId: {
required: true,
type: String,
},
},
data() {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
};
},
methods: {
// 过滤属性类型
filterItem(type, index) {
let arr = this.skinFieldList.filter((v) => {
return v.remark == type;
});
if (arr.length) {
return this.filterValueType(arr[index]);
} else {
return "";
}
},
// 过滤属性值类型
filterValueType(info = {}) {
let value = "";
if (info.fieldType !== "" && info.fieldType === "1" && info.fieldValue) {
value = info.fieldValue;
} else if (
info.fieldType !== "" &&
info.fieldType === "2" &&
info.fieldValue
) {
value = `url(${this.api + info.fieldValue})`;
}
return value;
},
},
};
</script>
<style lang="less" scoped>
.sample_form_skin {
width: 1000px;
height: 562.5px;
padding: 20px;
background-image: linear-gradient(#26c5ff, #2c66ff);
background-repeat: no-repeat !important ;
background-position: center !important ;
background-size: cover !important ;
.header {
width: 100%;
color: #fff;
.title {
font-size: 30px;
font-weight: 600;
}
.right {
.count {
width: 50px;
height: 50px;
background: url("../../../../assets/img/pic_png_nengliang.png")
no-repeat center;
background-size: 100% 100%;
color: #317054;
text-align: center;
line-height: 50px;
}
}
}
.title-img {
width: 600px;
margin-top: 20px;
}
.search-box {
width: 600px;
height: 38px;
margin-top: 20px;
background: #ffffff;
box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
border-radius: 8px;
position: relative;
.search-box-btn {
width: 70px;
height: 30px;
background: linear-gradient(90deg, #0857e8, #59d1fe);
border-radius: 4px;
color: #fff;
position: absolute;
right: 4px;
top: 4px;
img {
width: 18px;
margin-right: 6px;
}
}
}
.hot-text {
width: 600px;
margin-top: 10px;
color: #fff;
}
.main {
width: 800px;
height: 250px;
margin-top: 10px;
color: #fff;
.left {
width: 49%;
height: 100%;
border: 1px dashed #ececec;
border-radius: 4px;
text-align: center;
line-height: 200px;
}
.right {
width: 49%;
height: 100%;
border-radius: 4px;
.top {
height: 49%;
width: 100%;
.btn1 {
height: 100%;
width: 54%;
border-radius: 4px;
background-size: 100% 100% !important;
}
.btn2 {
height: 100%;
width: 44%;
border-radius: 4px;
background-size: 100% 100% !important;
}
}
.border {
border: 1px dashed #ececec;
}
.bottom {
height: 49%;
width: 100%;
border: 1px dashed #ececec;
border-radius: 4px;
}
}
}
.footer {
width: 800px;
color: #fff;
}
}
</style>
\ No newline at end of file
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