|
@@ -0,0 +1,353 @@
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ Store
|
|
|
+ } from '@/store/index';
|
|
|
+
|
|
|
+ store = Store();
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <!-- 弹出框组件 -->
|
|
|
+ <div :class="['popup-main',animationClass]" v-show="isshow" :isEmit="isEmit" id="popup"
|
|
|
+ :style="{height:height,width:width,top:top,right:right,minWidth:minWidth}" ref="popup">
|
|
|
+ <div class="borderstyle" :style="{height:height}">
|
|
|
+ <!-- <div class="angle-border-blue left-top-border"></div> -->
|
|
|
+ <!-- <div class="angle-border-blue right-top-border"></div> -->
|
|
|
+ <div class="angle-border left-bottom-border"></div>
|
|
|
+ <div class="angle-border right-bottom-border"></div>
|
|
|
+ <div :class="longheader?'header long':'header'">
|
|
|
+ <div style="width: 20rem;"></div>
|
|
|
+ <span>{{title}}</span>
|
|
|
+ <i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'"
|
|
|
+ @click="closebasicLayer" style="font-size: 16rem;" />
|
|
|
+ </div>
|
|
|
+ <div class="middle">
|
|
|
+ <slot></slot>
|
|
|
+ </div>
|
|
|
+ <div v-if="showfooter" class="footers"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ let store = undefined;
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isshow: false,
|
|
|
+ title: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // props: ['height', 'title', 'width', 'isEmit', 'animationClass'],
|
|
|
+ props: {
|
|
|
+ height: { //高度单位rem
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ title: { //标题
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ right: { //初始化位置,右侧距离
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ top: { //初始化位置,顶部距离
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ width: { //的宽度
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ isEmit: { //是否有回调函数,用于清除功能
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ animationClass: { //组件弹出方向,slide-right右,slide-left左,slide-bottom下
|
|
|
+ type: String,
|
|
|
+ default: 'slide-right'
|
|
|
+ },
|
|
|
+ showfooter: { //底部动态文字是否展示
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ minWidth: { //最小宽度
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ longheader: { //是否是长背景图
|
|
|
+ type: String,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ top:{//距离顶端
|
|
|
+ type:String,
|
|
|
+ default:""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ closebasicLayer() {
|
|
|
+ console.log("animationClass", this.animationClass)
|
|
|
+
|
|
|
+ let style = document.styleSheets[0];
|
|
|
+ if (this.animationClass === "slide-right") {
|
|
|
+ style.insertRule(
|
|
|
+ "@keyframes move-right {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
|
|
|
+ 10);
|
|
|
+ style.insertRule(
|
|
|
+ "@keyframes slide-right {0% {opacity: 1;transform: translateX(100%)}100% {opacity: 1;transform: translateX(0%)}}",
|
|
|
+ 11);
|
|
|
+ let popup = this.$refs.popup
|
|
|
+ popup.style.right = '-400rem'
|
|
|
+ popup.style.animation = 'move-right 0.4s linear';
|
|
|
+ setTimeout(res => {
|
|
|
+ popup.style.animation = 'slide-right 0.4s linear'
|
|
|
+ this.isshow = false
|
|
|
+ }, 400)
|
|
|
+ } else if (this.animationClass === "fadein-left") {
|
|
|
+ style.insertRule(
|
|
|
+ "@keyframes move-rightL {0% {opacity: 1;transform: translateX(0%)}100% {opacity: 1;transform: translateX(-100%)}}",
|
|
|
+ 8);
|
|
|
+ style.insertRule(
|
|
|
+ "@keyframes slide-right {0% {opacity: 1;transform: translateX(100%)}100% {opacity: 1;transform: translateX(0%)}}",
|
|
|
+ 9);
|
|
|
+ style.insertRule(
|
|
|
+ "@keyframes slide-left {0% {opacity: 1;transform: translateX(-100%)}100% {opacity: 1;transform: translateX(0%)}}",
|
|
|
+ 10);
|
|
|
+ let popup = this.$refs.popup
|
|
|
+ // popup.style.left = '-400rem'
|
|
|
+ popup.style.animation = 'move-rightL 0.4s linear';
|
|
|
+ setTimeout(res => {
|
|
|
+ popup.style.animation = 'slide-left 0.4s linear'
|
|
|
+ this.isshow = false
|
|
|
+ }, 400)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isEmit) {
|
|
|
+ this.$emit('closeJTPopup');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log('store', this.showfooter)
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ @charset "UTF-8";
|
|
|
+
|
|
|
+ @font-face {
|
|
|
+ font-family: "TTTGB-Medium";
|
|
|
+ src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
|
|
|
+ url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
|
|
|
+ url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
|
|
|
+ font-weight: normal;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-main {
|
|
|
+ position: absolute;
|
|
|
+ right: 26rem;
|
|
|
+ top: 125rem;
|
|
|
+ // height: 490rem;
|
|
|
+
|
|
|
+ height: calc(100% - 200rem);
|
|
|
+ width: 350rem;
|
|
|
+ // padding: 10rem;
|
|
|
+ // z-index: 1000;
|
|
|
+ font-size: 16rem;
|
|
|
+ color: white;
|
|
|
+ user-select: none;
|
|
|
+ animation-name: slide-right;
|
|
|
+ animation-duration: .8s;
|
|
|
+
|
|
|
+ //头部背景图
|
|
|
+ .header {
|
|
|
+ height: 51rem;
|
|
|
+ width: calc(100% + 20rem);
|
|
|
+ background: url('@/assets/images/PopupHeader.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: -10rem;
|
|
|
+ margin-bottom: 0rem;
|
|
|
+ line-height: 51rem;
|
|
|
+ display: flex;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ i:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: "TTTGB-Medium", sans-serif !important;
|
|
|
+ font-size: 20rem;
|
|
|
+ flex: 15;
|
|
|
+ }
|
|
|
+
|
|
|
+ i:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ z-index: 101;
|
|
|
+ flex: 1;
|
|
|
+ margin: 0rem 8rem;
|
|
|
+ font-size: 20rem !important;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .iconfont{
|
|
|
+ // font-size: 16rem;
|
|
|
+ // }
|
|
|
+
|
|
|
+ //滚动条-鼠标悬浮显示
|
|
|
+ // .middle {
|
|
|
+ // height: calc(100% - 71rem);
|
|
|
+ // width: 100%;
|
|
|
+ // overflow-y: hidden;
|
|
|
+ // padding: 15rem 0 0 0;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .middle:hover{
|
|
|
+ // overflow-y:auto;
|
|
|
+ // }
|
|
|
+
|
|
|
+ //滚动条一直显示
|
|
|
+ .middle {
|
|
|
+ height: calc(100% - 81rem);
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 15rem 0 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footers {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ height: 30rem;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 30rem;
|
|
|
+ background: url('@/assets/images/footerss.webp') no-repeat center;
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /* 四个边角样式 */
|
|
|
+ .borderstyle {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ // height: 490rem;
|
|
|
+ height: calc(100vh - 200rem);
|
|
|
+ padding: 10rem;
|
|
|
+ border: 1rem solid #008aff70 !important;
|
|
|
+ background-color: rgba(5, 45, 115, 0.5) !important;
|
|
|
+ box-shadow: 0 4rem 15rem 1rem #02213bb3;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .angle-border {
|
|
|
+ position: absolute;
|
|
|
+ width: 12rem;
|
|
|
+ height: 12rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .angle-border-blue {
|
|
|
+ position: absolute;
|
|
|
+ width: 70rem;
|
|
|
+ height: 30rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-top-border {
|
|
|
+ top: -2rem;
|
|
|
+ left: -2rem;
|
|
|
+ border-left: 2rem solid #008affdd;
|
|
|
+ border-top: 2rem solid #008affdd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-top-border {
|
|
|
+ top: -2rem;
|
|
|
+ right: -2rem;
|
|
|
+ border-right: 2rem solid #008affdd;
|
|
|
+ border-top: 2rem solid #008affdd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-bottom-border {
|
|
|
+ bottom: -2rem;
|
|
|
+ left: -2rem;
|
|
|
+ border-bottom: 2rem solid #FFFFFF;
|
|
|
+ border-left: 2rem solid #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-bottom-border {
|
|
|
+ bottom: -2rem;
|
|
|
+ right: -2rem;
|
|
|
+ border-right: 2rem solid #FFFFFF;
|
|
|
+ border-bottom: 2rem solid #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .long {
|
|
|
+ background: url('@/assets/images/longheader.png') no-repeat !important;
|
|
|
+ background-size: 100% 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .fadein-right {
|
|
|
+ // animation-name: slide-right;
|
|
|
+ // animation-duration: .8s;
|
|
|
+ // }
|
|
|
+
|
|
|
+ @keyframes slide-right {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(100%)
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateX(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes slide-bottom {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-100%)
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes move-right {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(50%)
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateX(100%)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fadein-left {
|
|
|
+ animation-name: slide-left;
|
|
|
+ animation-duration: .8s;
|
|
|
+ left: 40rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes slide-left {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate3d(-100%, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|