Skip to content

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

perf:修改短信配置页面

parent d758c1a1
Show whitespace changes
Inline Side-by-side
Showing with 323 additions and 64 deletions
base-manager-ui/admin/public/index.html
View file @ df90758f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<!-- <title><%= process.env.VUE_APP_NAME %></title> -->
<title></title>
<!-- require cdn assets css -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
<style>
@font-face {
font-family: Source Han Sans CN;
src: url("./SourceHanSansSC-Regular-2.otf");
}
</style>
</head>
</head>
<body>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="popContainer">
<div id="app"></div>
......@@ -25,5 +34,6 @@
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
</body>
</html>
\ No newline at end of file
base-manager-ui/admin/src/components/YButton.vue 0 → 100644
View file @ df90758f
<template>
<div class="y-button" :style="{ '--w': width + 'px' }">
<button
type="button"
:style="{ '--w': width + 'px' }"
:class="{ animating: active, active: value }"
@click="clickHandler"
@animationend="animationend"
>
<span>
<b></b>
<svg viewBox="-5.5 -5.5 71 71" id="circle">
<circle
cx="30"
cy="30"
r="30"
stroke="white"
stroke-width="11"
fill="transparent"
></circle>
</svg>
</span>
</button>
<div :class="['text', { active: value }]">
<!-- <span class="on">
<span>
{{ activeText }}
</span>
</span>
<span class="off">
<span>
{{ unActiveText }}
</span>
</span> -->
{{ value ? activeText : unActiveText }}
</div>
</div>
</template>
<script>
export default {
model: {
prop: "checked",
event: "change",
},
props: {
width: {
type: Number,
default: 84,
},
checked: {
required: true,
},
activeText: {
default: "ON",
},
unActiveText: {
default: "OFF",
},
},
data() {
return {
active: false,
};
},
computed: {
value() {
return this.checked === 1 || this.checked === "1";
},
},
methods: {
clickHandler() {
this.active = true;
},
animationend() {
this.active = false;
this.$emit("change", this.checked ? 0 : 1);
},
},
};
</script>
<style lang="less" scoped>
@keyframes c {
to {
transform: none;
}
}
.y-button {
--timing: cubic-bezier(0.645, 0.045, 0.355, 1);
--primary: #f4f7f5;
width: var(--w);
button {
--bg: rgb(var(--rgb));
--bga: rgba(var(--rgb), 0.4);
/* Safari fix */
-webkit-appearance: none;
border: none;
font-size: 100%;
width: var(--w);
height: var(--w);
background: var(--bg);
box-shadow: 0 3px 12px 2px var(--bga);
border-radius: 50%;
position: relative;
overflow: hidden;
cursor: pointer;
transition: 0.1s transform, 0.3s box-shadow;
will-change: transform, box-shadow;
backface-visibility: hidden;
}
button > * {
pointer-events: none;
}
button:focus {
outline: none;
}
button:active {
transform: scale(0.97);
}
button:after {
--bg: rgb(var(--rgb));
content: "";
position: absolute;
top: -15%;
left: -15%;
width: 200%;
height: 200%;
background: var(--bg);
border-radius: inherit;
transform: translate(5%, 5%) scale(0.03);
pointer-events: none;
}
button.animating:after {
animation: c 0.5s cubic-bezier(0.5, 0, 0.5, 1) backwards;
}
button.active,
button:not(.active):after {
--rgb: 64, 227, 120;
}
button:not(.active),
button.active:after {
--rgb: 229, 55, 94;
}
button span {
display: inline-block;
position: relative;
margin-top: 5px;
}
button b {
--w: 7px;
overflow: hidden;
border-radius: var(--w);
display: grid;
width: var(--w);
height: 35px;
top: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
z-index: 3;
will-change: transform;
}
button b:before {
content: "";
background: #fff;
width: 100%;
height: 100%;
border-radius: var(--w);
transform: translateY(-15px);
transition-timing-function: var(--timing);
transition: 0.5s;
}
button.active b:before {
transform: translateY(12px);
transition-delay: 0.27s;
transition-timing-function: cubic-bezier(0.25, 0.25, 0.25, 1.25);
}
button svg {
--dash: 190;
stroke-linecap: round;
stroke-dasharray: var(--dash);
stroke-dashoffset: var(--dash);
width: 46px;
height: 46px;
transform: scaleX(-1) rotate(-89deg);
transition: 0.4s;
transition-timing-function: var(--timing);
margin: auto;
position: relative;
z-index: 1;
will-change: transform, stroke-dashoffset;
}
button:not(.active) svg {
stroke-dashoffset: 40;
transform: scaleX(-1) rotate(-52deg);
transition: 0.5s 0.25s;
}
aside {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
text-align: center;
width: 100%;
padding: 0 2em 2em;
font-family: "Pacifico", cursive;
}
aside a {
text-decoration: underline;
color: #e65289;
display: flex;
align-items: center;
}
aside a:hover,
aside a:focus {
color: #000;
text-decoration: none;
}
.dribbble-logo {
width: 18px;
height: 18px;
margin-right: 5px;
}
.text {
width: 100%;
margin-top: 10px;
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #c9c9c9;
text-align: center;
}
}
</style>
base-manager-ui/admin/src/pages/basicset/sms/configurat.vue
View file @ df90758f
<template>
<div class="configurat">
<div class="title">短信全局配置</div>
<div class="set-configurat">
<y-switch
v-model="setInfo.messageoff"
checkedChildren="开"
unCheckedChildren="关"
@change="changeClose"
></y-switch>
<div class="des">
全局配置，一键控制
</div>
<div class="des">
轻松管理政务短信通知的全局设置，确保信息的准确传递
</div>
<div class="tag-list">
<div class="tag-item" v-for="v in tagList" :key="v">
{{ v }}
</div>
</div>
<YButton v-model="setInfo.messageoff" @change="changeClose"></YButton>
</div>
</template>
<script>
import YSwitch from "@/components/yswitch/YSwitch.vue";
import YButton from "@/components/YButton";
import { getSmssetList, saveSmssetList } from "@/services/configurat";
import local from "@/utils/local";
export default {
components: {
YSwitch,
YButton,
},
data() {
return {
tagList: ["全局管控", "精准到达", "远程监管", "贴心服务"],
setInfo: {
siteId: local.getLocal("siteId"),
messageoff: "",
......@@ -63,36 +68,41 @@ export default {
.configurat {
width: 100%;
height: 100%;
padding: 20px;
.main {
height: 100%;
display: flex;
.set-configurat {
margin-left: 20px;
}
.left {
width: 224px;
margin-right: 20px;
}
.right {
height: 200px;
padding: 15px;
flex: 1;
background-color: #fff;
padding: 115px 80px;
background: url("~@/assets/img/sms_bg.jpg") no-repeat center/100% 100%;
.title {
margin-bottom: 35px;
font-size: 44px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #0857e8;
}
.des {
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #365182;
line-height: 35px;
}
.title {
margin-left: 15px;
position: relative;
margin-bottom: 15px;
&::before {
content: "";
width: 4px;
height: 20px;
position: absolute;
top: 1px;
left: -16px;
background-color: rgba(5, 149, 253, 1);
.tag-list {
margin-top: 38px;
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 26px;
.tag-item {
width: 138px;
height: 50px;
background: rgba(8, 87, 232, 0.05);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #232323;
}
}
}
......
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