diff --git a/epmet-oper-web/package.json b/epmet-oper-web/package.json index a36c077..4e80859 100644 --- a/epmet-oper-web/package.json +++ b/epmet-oper-web/package.json @@ -43,6 +43,7 @@ "@vue/cli-plugin-eslint": "^3.10.0", "@vue/cli-service": "^3.10.0", "@vue/eslint-config-standard": "^4.0.0", + "dai-js": "^0.0.12", "element-theme-chalk": "^2.13.0", "natives": "^1.1.6", "vue-template-compiler": "^2.6.11" diff --git a/epmet-oper-web/public/index.html b/epmet-oper-web/public/index.html index 8e85363..4e072fb 100644 --- a/epmet-oper-web/public/index.html +++ b/epmet-oper-web/public/index.html @@ -29,19 +29,19 @@ <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %> - + <% } %> <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %> - + <% } %> <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %> - + <% } %> <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %> - + <% } %> diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/add.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/add.png new file mode 100644 index 0000000..ed08fc7 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/add.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/arrow-down.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/arrow-down.png new file mode 100644 index 0000000..30b69a1 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/arrow-down.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/common-cpt.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/common-cpt.png new file mode 100644 index 0000000..09379c2 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/common-cpt.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/del.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/del.png new file mode 100644 index 0000000..6f2b15b Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/del.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/down.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/down.png new file mode 100644 index 0000000..d18577c Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/down.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt1.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt1.png new file mode 100644 index 0000000..d2763ae Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt1.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt2.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt2.png new file mode 100644 index 0000000..ee6b0bb Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt2.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt3.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt3.png new file mode 100644 index 0000000..14b10fc Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt3.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt4.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt4.png new file mode 100644 index 0000000..68fb0e3 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/function-cpt4.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/info.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/info.png new file mode 100644 index 0000000..e2f3d50 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/info.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up.png new file mode 100644 index 0000000..82181ae Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up.png differ diff --git a/epmet-oper-web/src/assets/scss/c/anime.scss b/epmet-oper-web/src/assets/scss/c/anime.scss new file mode 100644 index 0000000..fb63317 --- /dev/null +++ b/epmet-oper-web/src/assets/scss/c/anime.scss @@ -0,0 +1,129 @@ +@import "./config.scss"; + +@keyframes rotation { + 0% { + transform: rotateY(0deg); + } + + 100% { + transform: rotateY(360deg); + } +} + +@keyframes rotation-x { + 0% { + transform: rotateX(0deg); + } + + 100% { + transform: rotateX(360deg); + } +} + +@keyframes rotation-z { + 0% { + transform: rotateZ(0deg); + } + + 100% { + transform: rotateZ(360deg); + } +} + +.a-rotation { + animation: rotation $ad1 linear; +} + +.a-rotation-x { + animation: rotation-x $ad1 linear; +} + +.a-rotation-z { + animation: rotation-z $ad1 linear; +} + +.a-rotation-z-i { + animation: rotation-z 8*$ad1 linear infinite; +} + + + +$fade_in_px: 100px; + +@keyframes fade_in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fade_in_up { + 0% { + transform: translate(0, $fade_in_px); + opacity: 0.3; + } + + 100% { + transform: translate(0); + opacity: 1; + } +} + +@keyframes fade_in_down { + 0% { + transform: translate(0, -$fade_in_px); + opacity: 0.3; + } + + 100% { + transform: translate(0); + opacity: 1; + } +} + +@keyframes fade_in_right { + 0% { + transform: translate($fade_in_px, 0); + opacity: 0.3; + } + + 100% { + transform: translate(0); + opacity: 1; + } +} + +@keyframes fade_in_left { + 0% { + transform: translate(-$fade_in_px, 0); + opacity: 0.3; + } + + 100% { + transform: translate(0); + opacity: 1; + } +} + +.a-fade-in { + animation: fade_in $ad2 ease-in; +} + +.a-fade-in-up { + animation: fade_in_up $ad2 ease-in; +} + +.a-fade-in-right { + animation: fade_in_right $ad2 ease-in; +} + +.a-fade-in-left { + animation: fade_in_left $ad2 ease-in; +} + +.a-fade-in-down { + animation: fade_in_down $ad2 ease-in; +} diff --git a/epmet-oper-web/src/assets/scss/c/config.scss b/epmet-oper-web/src/assets/scss/c/config.scss new file mode 100644 index 0000000..188fb8e --- /dev/null +++ b/epmet-oper-web/src/assets/scss/c/config.scss @@ -0,0 +1,42 @@ +/** + * 全局配置 + * + * @author dai-siki同学 < 851733175@qq.com > + */ +/*--------------------------------------------------------------- + | 参数配置 | + ---------------------------------------------------------------*/ +//主宽度 +$w1: 1200px; + +//网站主色 primary color bgcolor +$c1: #3b7cff; // 红 dd000f +$c2: #f24949; + +//灰度色 用于字体 +$fc0: #010033; +$fc1: #3b4859; +$fc2: #445161; +$fc3: #8998ac; +$fc4: #b0b0b0; + +// 背景色 +$bgc1: #f5f6f7; +$bgc2: #595b5f; + +// 线框色 +$bdc1: #eeeeee; + +// 渐变背景色 +$rg1: radial-gradient(at bottom right, rgba(#fff, 0.35), transparent); +$lg1: linear-gradient(to left, rgba(#fff, 0.35), transparent); + +// 动画时长 +$ad1: 0.18s; // 很短很小幅度 +$ad2: 0.27s; // 0.18s +$ad3: 0.47s; // 0.18s +$ad4: 0.88s; // 0.18s +$ad4: 1.34s; // 0.18s + +// 黄金分割 +$goldenCut: 1.618; \ No newline at end of file diff --git a/epmet-oper-web/src/assets/scss/c/function.scss b/epmet-oper-web/src/assets/scss/c/function.scss new file mode 100644 index 0000000..d6d3819 --- /dev/null +++ b/epmet-oper-web/src/assets/scss/c/function.scss @@ -0,0 +1,206 @@ +@import "./config.scss"; + +/*--------------------------------------------------------------- + | 公共函数 | + ---------------------------------------------------------------*/ +// 字体大小 +@mixin ff1 { + font-family: "Gotham", "Helvetica Neue", "Hiragino Sans GB", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, + sans-serif; +} +@mixin ff2 { + font-family: "Open Sans", "PingFang SC", Arial, "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", + "WenQuanYi Micro Hei", Arial, sans-serif; +} +@mixin ff3 { + font-family: Tahoma, Verdana, sans-serif, "simsun", "微软雅黑"; +} +// 统一的圆角 +@mixin bdrs { + border-radius: 15px; +} +// 统一的阴影 +@mixin bs1 { + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); +} +@mixin bs2 { + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12); +} +@mixin bs3 { + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1); +} +@mixin bs4 { + box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.12); +} +// 定宽居中 +@mixin bd_center { + width: $w1; + margin-right: auto; + margin-left: auto; +} +// 清除容器自身浮动 +@mixin cs { + &::after { + display: block; + visibility: hidden; + clear: both; + overflow: hidden; + height: 0; + content: ""; + } +} +// 已知高度的容器在页面中水平垂直居中 +@mixin centre { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +// 已知高度的容器在页面中水平垂直居中 +@mixin hub($w, $h) { + position: absolute; + top: 50%; + left: 50%; + width: $w; + height: $h; + margin: -$h * 0.5 0 0 -$w * 0.5; +} +// 未知高度容器在页面居中,父元素必须相对定位 +@mixin hub2($sel, $w, $h) { + position: absolute; + top: 50%; + left: 50%; + margin: 0; + padding: 0; + + #{$sel} { + position: absolute; + top: -50%; + left: -50%; + display: block; + } +} +// 不换行显示省略号 +@mixin toe { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-wrap: normal; +} +// 图片居中 +@mixin img_hub { + position: absolute; + top: 50%; + left: 50%; + display: block; + + img { + position: absolute; + top: -50%; + left: -50%; + display: block; + + &.hidden { + position: static; + visibility: hidden; + } + } +} +//遮蔽盒子 +@mixin shield { + position: fixed; + z-index: 9999; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.1); +} +//居中 +@mixin absolute_center { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +// 白色的一闪而过的光芒，展示那种光滑靓丽 +@mixin flicker { + position: relative; + overflow: hidden; + + &::before { + content: ""; + position: absolute; + display: block; + top: -50px; + left: -50px; + width: 1000px; + height: 1px; + box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.18); + } + + &:hover { + &::before { + transform: rotate(-90deg) translatey(100px); + transition: all 3s; + } + } +} + +// 加载组件 +.z-loading { + display: block; + text-align: center; + padding: 50px 0; + + .fa-spinner { + font-size: 50px; + color: $fc3; + } +} + +//遮蔽盒子 +.u-shield { + @include shield; +} + +//清除浮动 +.f-cb { + float: none; + clear: both; + height: 0; +} + +//清除自身 +.f-cs { + @include cs; +} + +.f-hide { + display: none !important; +} + +.f-hide2 { + display: none; +} + +.f-fl { + float: left; +} + +.f-fr { + float: right; +} + +.f-ww { + @include bd_center; +} + +.f-pl-10 { + padding-left: 10px; +} diff --git a/epmet-oper-web/src/assets/scss/c/reset.scss b/epmet-oper-web/src/assets/scss/c/reset.scss new file mode 100644 index 0000000..24be319 --- /dev/null +++ b/epmet-oper-web/src/assets/scss/c/reset.scss @@ -0,0 +1,93 @@ +@import "./config.scss"; +@import "./function.scss"; + +/*--------------------------------------------------------------- + | 样式重置 | + ---------------------------------------------------------------*/ + +* { + margin: 0; + padding: 0; +} + +html { + height: 100%; +} + +body { + @include ff2; + height: 100%; + font-size: 14px; + background: #fff; + background-attachment: fixed; + color: $fc1; +} + +::selection { + background-color: $c1; + color: #fff; +} + +a { + text-decoration: none; + cursor: pointer; + + &:hover { + text-decoration: none; + } +} + +li { + list-style-type: none; +} + +img { + border: none; + display: block; +} + +i { + font-style: normal; +} + +b { + // font-weight: normal; +} + +table { + border-collapse: collapse; +} + +button, +input, +select, +textarea { + @include ff2; + outline: none; + border: none; +} + +button, +input[type="button"], +input[type="submit"] { + cursor: pointer; +} +// 去掉input[type="number"]的箭头 + +input::-webkit-inner-spin-button, +input::-webkit-outer-spin-button { + -webkit-appearance: none; +} + +input[type="number"] { + -moz-appearance: textfield; +} + +a, +button, +input { + &:hover { + transition: all 0.15s; + -webkit-touch-callout: none; + } +} diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss new file mode 100644 index 0000000..7fb3664 --- /dev/null +++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss @@ -0,0 +1,145 @@ +@import "@/assets/scss/c/config.scss"; +@import "@/assets/scss/c/function.scss"; + +.m-wx_index { + .wrap { + margin-top: 10px; + } + .mw-cpt_type { + min-height: 200px; + border-radius: 4px; + background-color: #ffffff; + } + + .mw-show { + padding: 40px 0 100px; + + .mw-phone { + position: relative; + margin: 0 auto; + width: 375px; + min-height: 500px; + background-color: #ffffff; + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1); + + .mw-phone-hint { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + text-align: center; + color: #aaaaaa; + height: 30px; + line-height: 30px; + font-size: 12px; + transition: transform $ad2 ease-in-out; + + &.z-out-left { + transform: translateX(-250px); + } + + &.z-out-down { + transform: translateY(100px); + } + } + + .z-none { + border: 1px dashed #aaa; + } + + .mw-cpt { + cursor: pointer; + + &.z-focused { + box-shadow: 0 0 8px 4px #cc5; + } + + .d-cpt-operate { + @include bs1; + position: absolute; + top: -1000px; + bottom: -1000px; + right: -50px; + width: 50px; + padding: 5px 0; + height: 200px; + margin: auto 0; + border-radius: 0 4px 4px 0; + border-left: 1px solid #bb5; + background-color: #ffffff; + text-align: center; + .d-cpt-btn { + margin-bottom: 2px; + padding: 8px 0 4px; + line-height: 16px; + + &:hover { + background-color: #f1f2f3; + } + + img { + height: 12px; + line-height: 12px; + } + p { + line-height: 10px; + font-size: 12px; + } + } + } + + .mw-cpt-top_title { + position: relative; + background-color: #ff4c52; + line-height: 50px; + padding-left: 15px; + font-family: PingFang SC; + font-weight: 500; + color: #ffffff; + font-size: 13px; + } + .mw-cpt-cnt_news { + position: relative; + } + } + + .mw-phone-fixed { + @include bs1; + position: absolute; + z-index: 10; + top: 300px; + right: -2px; + height: 50px; + width: 120px; + border-radius: 50px 0 0 50px; + border: 1px dashed #aaa; + background-color: #ffffff; + } + .mw-phone-top { + position: relative; + height: 50px; + } + .mw-phone-ban { + position: relative; + height: 200px; + } + .mw-phone-cnt { + position: relative; + min-height: 300px; + } + } + } + + .mw-set { + padding: 5px 20px; + min-height: 400px; + border-radius: 4px; + background-color: #ffffff; + .d-operate { + padding: 20px 0; + text-align: right; + } + } +} diff --git a/epmet-oper-web/src/views/modules/wx-mini/index-set.vue b/epmet-oper-web/src/views/modules/wx-mini/index-set.vue new file mode 100644 index 0000000..ca700b7 --- /dev/null +++ b/epmet-oper-web/src/views/modules/wx-mini/index-set.vue @@ -0,0 +1,428 @@ + + + + +