diff --git a/epmet-oper-web/public/index.html b/epmet-oper-web/public/index.html index 5209c34..31a1fda 100644 --- a/epmet-oper-web/public/index.html +++ b/epmet-oper-web/public/index.html @@ -29,7 +29,7 @@ <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %> - + <% } %> <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %> diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/pavilion.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/pavilion.png new file mode 100644 index 0000000..5bce6df Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/pavilion.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up-red.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up-red.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-red.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 index 82181ae..1456ea6 100644 Binary files a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up.png 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 index fb63317..bf1512e 100644 --- a/epmet-oper-web/src/assets/scss/c/anime.scss +++ b/epmet-oper-web/src/assets/scss/c/anime.scss @@ -127,3 +127,84 @@ $fade_in_px: 100px; .a-fade-in-down { animation: fade_in_down $ad2 ease-in; } + +@keyframes scale_in { + 0% { + opacity: 0; + transform: scale(0); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes scale_in_left_up { + 0% { + opacity: 0; + transform: translate(-50%, -50%) scale(0); + } + + 100% { + opacity: 1; + transform: translate(0) scale(1); + } +} + +@keyframes scale_in_right_down { + 0% { + opacity: 0; + transform: translate(50%, 50%) scale(0); + } + + 100% { + opacity: 1; + transform: translate(0) scale(1); + } +} + +@keyframes scale_in_right_up { + 0% { + opacity: 0; + transform: translate(50%, -50%) scale(0); + } + + 100% { + opacity: 1; + transform: translate(0) scale(1); + } +} + +@keyframes scale_in_left_down { + 0% { + opacity: 0; + transform: translate(-50%, 50%) scale(0); + } + + 100% { + opacity: 1; + transform: translate(0) scale(1); + } +} + +.a-scale-in { + animation: scale_in $ad1*0.6 ease-out; +} + +.a-scale-in-left-up { + animation: scale_in_left_up $ad1 ease-out; +} + +.a-scale-in-right-up { + animation: scale_in_right_up $ad1 ease-out; +} + +.a-scale-in-left-down { + animation: scale_in_left_down $ad1 ease-out; +} + +.a-scale-in-right-down { + animation: scale_in_right_down $ad1 ease-out; +} + 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 index e7f5daa..0ff7f0b 100644 --- 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 @@ -1,5 +1,6 @@ @import "@/assets/scss/c/config.scss"; @import "@/assets/scss/c/function.scss"; +@import "@/assets/scss/c/anime.scss"; .m-wx_index { .wrap { @@ -115,7 +116,9 @@ } .mw-cpt { - &.z-focused { + cursor: default; + &.z-focused, + &:hover { box-shadow: none; } } @@ -180,9 +183,45 @@ } } + .mw-phone-fixed { + // @include bs1; + position: absolute; + z-index: 1000; + top: 420px; + right: 0; + height: 50px; + width: 136px; + // border-radius: 50px 0 0 50px; + // background-color: #ffffff; + } + .mw-phone-top { + position: relative; + height: 40px; + } + .mw-phone-ban { + position: relative; + min-height: 150px; + &.z-none { + &::before { + border-top: none; + border-bottom: none; + } + } + } + .mw-phone-cnt { + position: relative; + min-height: 350px; + padding-top: 1px; + padding-bottom: 10px; + } + .mw-cpt { position: relative; cursor: pointer; + transition: box-shadow $ad1 ease-in-out; + &:hover { + box-shadow: 0 0 12px 3px rgba(#67c23a, 0.2); + } &.z-focused { box-shadow: 0 0 12px 3px rgba(#67c23a, 0.5); @@ -352,26 +391,50 @@ border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, 1); + + .d-cpt-title { + position: relative; + margin: 10px 10px 0 10px; + padding: 7px 10px 13px; + font-size: 17px; + line-height: 15px; + font-family: PingFang SC; + font-weight: bold; + color: rgba(51, 51, 51, 1); + border-bottom: 1px solid #e7eeee; + + &::before { + content: ""; + position: absolute; + top: 7px; + left: 0; + width: 3px; + height: 15px; + background: rgba(230, 0, 0, 1); + border-radius: 3px; + } + } + .list { padding: 0 10px; .item { position: relative; - padding: 15px 0; - padding-left: 105px; - height: 100px; + padding: 10px 0; + padding-left: 110px; border-bottom: 1px solid #eee; &:last-child { border-bottom: none; } > img { position: absolute; - width: 95px; - height: 70px; + width: 100px; + height: 55px; left: 0; - top: 15px; + top: 11px; border-radius: 5px; } .d-news-title { + margin: 7px 0; height: 40px; font-size: 16px; font-family: PingFang SC; @@ -382,12 +445,121 @@ } .d-news-info { margin-top: 17px; - font-size: 11px; + margin-left: -110px; + padding: 0 1px; + font-size: 13px; + line-height: 13px; font-family: PingFang SC; font-weight: 500; color: rgba(153, 153, 153, 1); overflow: hidden; - span { + > img { + display: inline-block; + margin-right: 5px; + width: 13px; + vertical-align: bottom; + } + > span { + @include toe; + display: inline-block; + max-width: 70%; + vertical-align: bottom; + } + } + } + + .item2 { + position: relative; + padding: 10px 0; + border-bottom: 1px solid #eee; + &:last-child { + border-bottom: none; + } + .d-news-title { + @include toe; + font-size: 17px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(51, 51, 51, 1); + line-height: 24px; + } + .d-news-content { + @include toe; + padding: 3px 0; + font-size: 14px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(51, 51, 51, 1); + line-height: 20px; + } + .d-news-info { + margin-top: 5px; + padding: 0 1px; + font-size: 13px; + line-height: 26px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(153, 153, 153, 1); + overflow: hidden; + > img { + display: inline-block; + margin-right: 5px; + width: 26px; + vertical-align: bottom; + } + > span { + @include toe; + display: inline-block; + max-width: 70%; + vertical-align: bottom; + } + } + } + + .item3 { + position: relative; + padding: 10px 0; + border-bottom: 1px solid #eee; + &:last-child { + border-bottom: none; + } + .d-news-title { + @include toe; + font-size: 17px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(51, 51, 51, 1); + line-height: 24px; + } + .d-news-content { + @include toe; + padding: 3px 0; + font-size: 14px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(51, 51, 51, 1); + line-height: 20px; + } + .d-news-info { + margin-top: 5px; + padding: 0 1px; + font-size: 13px; + line-height: 13px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(153, 153, 153, 1); + overflow: hidden; + > img { + display: inline-block; + margin-right: 5px; + width: 13px; + vertical-align: bottom; + } + > span { + @include toe; + display: inline-block; + max-width: 70%; + vertical-align: bottom; } } } @@ -548,32 +720,6 @@ } } } - - .mw-phone-fixed { - // @include bs1; - position: absolute; - z-index: 1000; - top: 420px; - right: 0; - height: 50px; - width: 136px; - // border-radius: 50px 0 0 50px; - // background-color: #ffffff; - } - .mw-phone-top { - position: relative; - height: 40px; - } - .mw-phone-ban { - position: relative; - min-height: 150px; - } - .mw-phone-cnt { - position: relative; - min-height: 350px; - padding-top: 1px; - padding-bottom: 10px; - } } } diff --git a/epmet-oper-web/src/components/wx-index/cpt-item.vue b/epmet-oper-web/src/components/wx-index/cpt-item.vue index 981eb5f..9e7ebba 100644 --- a/epmet-oper-web/src/components/wx-index/cpt-item.vue +++ b/epmet-oper-web/src/components/wx-index/cpt-item.vue @@ -1,5 +1,7 @@