@ganwei-web/ganwei-pc-cli 6.2.2 → 6.2.3

package/ganwei-app-6.2.1/packages/ganwei-app-empty-page/src/components/appFrame/appFrame.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="appFrame wh100">
+        <appTop v-if="showTop" :leftText='leftText' :leftIcon='leftIcon' :leftIconSize='leftIconSize'
+            :centerText="centerText" :rightIcon='rightIcon' :rightIconTip='rightIconTip'
+            :rightIconTipColor='rightIconTipColor' :rightIconSize='rightIconSize' :rightIconTipSize='rightIconTipSize'
+            @rightClick='rightClick' :scrollable="scrollable" :qrcode="qrcode" :camera="camera" @changeCamera="changeCamera"
+            @changeQrcode="changeQrcode" @onRichScanCallback="onRichScanCallback">
+            <template v-slot:header-left>
+                <slot name="header-left" />
+            </template>
+            <template v-slot:header-center>
+                <slot name="header-center" />
+            </template>
+            <template v-slot:header-right>
+                <slot name="header-right" />
+            </template>
+        </appTop>
+        <div class="appFrameMain" @touchstart.stop='start' @touchend.stop='end' :style="{ padding: padding }">
+            <slot></slot>
+        </div>
+        <appBottom v-if="showBottom" :selected='selected'></appBottom>
+    </div>
+</template>
+
+<script>
+import appTop from './top.vue'
+import appBottom from './bottom.vue'
+export default {
+    components: { appTop, appBottom },
+    props: {
+        showTop: {
+            type: Boolean,
+            default: true
+        },
+        padding: {
+            type: String,
+            default: '0 16px'
+        },
+        leftText: {
+            type: String,
+            default: ''
+        },
+        leftIcon: {
+            type: String,
+            default: ''
+        },
+        leftIconSize: {
+            type: String,
+            default: '20'
+        },
+        showBottom: {
+            type: Boolean,
+            default: true
+        },
+        selected: {
+            type: Number,
+            default: 0
+        },
+        centerText: {
+            type: String,
+            default: ''
+        },
+        rightIcon: {
+            type: String,
+            default: ''
+        },
+        rightIconSize: {
+            type: String,
+            default: '30'
+        },
+        rightIconTip: {
+            type: String,
+            default: ''
+        },
+        rightIconTipSize: {
+            type: String,
+            default: '10'
+        },
+        rightIconTipColor: {
+            type: String,
+            default: ''
+        },
+        touchBack: {
+            type: Boolean,
+            default: false
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        },
+        qrcode: {
+            type: Boolean,
+            default: false
+        },
+        camera: {
+            type: String,
+            default: 'off'
+        }
+    },
+
+    data () {
+        return {
+            startX: 0,
+            endX: 0,
+            height: ''
+        }
+    },
+    methods: {
+        start (e) {
+            this.startX = e.changedTouches[0].clientX
+        },
+        end (e) {
+            if (this.startX <= 50 && e.changedTouches[0].clientX - this.startX > 80) {
+                if (this.touchBack) {
+                    this.$router.back(-1)
+                }
+            }
+        },
+        rightClick (data) {
+            this.$emit('rightClick', data)
+        },
+        onSwipeRight () {
+            if (this.touchBack) {
+                this.$router.back(-1)
+            }
+        },
+        changeCamera (e) {
+            this.$emit('changeCamera', e)
+        },
+
+        changeQrcode (e) {
+            this.$emit('changeQrcode', e)
+        },
+        onRichScanCallback (res) {
+            this.$emit('onRichScanCallback', res)
+        }
+    }
+}
+</script>
+
+<style lang='scss'>
+.content {
+    width: 100%;
+    height: 100%;
+}
+
+.appFrame {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .appFrameMain {
+        width: 100%;
+        // height: calc(100% - 70px - 54px);
+        flex: 1;
+        background-color: var(--appFrameMain-bg);
+        padding: 0 16px;
+        overflow: hidden;
+    }
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-empty-page/src/components/appFrame/bottom.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="appBottom flex-between-center" id="voiceImg">
+        <div class="iconItem flex-center" v-for="(item,index) in iconList" :key="index" @click="appBottomSelect(index,item)">
+            <div class="bottom-item">
+                <!-- <i v-if="item.icon" :class='selectedIndex==index?item.selectIcon:item.icon' class="iconfont-app bottom-item-icon"></i> -->
+                <img class="bottom-item-icon" :src="menuImageBase + (selectedIndex==index ? `${item.image.name}-active.${item.image.ext}` : item.thumbnail)">
+                <p class="bottom-item-txt" :class="selectedIndex==index ? 'bottom-item-active' : ''">{{item.name}}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script src='./js/bottom.js'></script>
+
+<style lang='scss' src='./css/bottom.scss' scoped></style>

package/ganwei-app-6.2.1/packages/ganwei-app-empty-page/src/components/appFrame/css/bottom.scss

@@ -0,0 +1,381 @@
+::v-deep .el-drawer__container {
+    background: rgba(17, 19, 24, 0.45);
+    backdrop-filter: blur(22px);
+
+    .el-drawer {
+        background-color: transparent;
+
+        .el-drawer__body {
+            background-color: transparent;
+        }
+
+        .voiceView {
+            position: absolute;
+            bottom: 45%;
+            width: 100%;
+            transform: translateY(-50%);
+
+            //语音动画
+            .loader {
+                margin: auto;
+                width: 250px;
+                height: 70px;
+                display: flex;
+                justify-content: space-between;
+                opacity: 0;
+
+                span {
+                    display: block;
+                    background: #3894f7;
+                    width: 3px;
+                    height: 10%;
+                    border-radius: 3px;
+                    margin-top: 35px;
+
+                    &:nth-child(1) {
+                        animation: load 1.5s 1s infinite linear;
+                    }
+
+                    &:nth-child(2) {
+                        animation: load 1.5s 0.9s infinite linear;
+                    }
+
+                    &:nth-child(3) {
+                        animation: load 1.5s 0.8s infinite linear;
+                    }
+
+                    &:nth-child(4) {
+                        animation: load 1.5s 0.7s infinite linear;
+                    }
+
+                    &:nth-child(5) {
+                        animation: load 1.5s 0.6s infinite linear;
+                    }
+
+                    &:nth-child(6) {
+                        animation: load 1.5s 0.5s infinite linear;
+                    }
+
+                    &:nth-child(7) {
+                        animation: load 1.5s 0.4s infinite linear;
+                    }
+
+                    &:nth-child(8) {
+                        animation: load 1.5s 0.3s infinite linear;
+                    }
+
+                    &:nth-child(9) {
+                        animation: load 1.5s 0.2s infinite linear;
+                    }
+
+                    &:nth-child(10) {
+                        animation: load 1.5s 0.1s infinite linear;
+                    }
+
+                    &:nth-child(11) {
+                        animation: load 1.5s 0s infinite linear;
+                    }
+
+                    &:nth-child(12) {
+                        animation: load 1.5s 0.1s infinite linear;
+                    }
+
+                    &:nth-child(13) {
+                        animation: load 1.5s 0.2s infinite linear;
+                    }
+
+                    &:nth-child(14) {
+                        animation: load 1.5s 0.3s infinite linear;
+                    }
+
+                    &:nth-child(15) {
+                        animation: load 1.5s 0.4s infinite linear;
+                    }
+
+                    &:nth-child(16) {
+                        animation: load 1.5s 0.5s infinite linear;
+                    }
+
+                    &:nth-child(17) {
+                        animation: load 1.5s 0.6s infinite linear;
+                    }
+
+                    &:nth-child(18) {
+                        animation: load 1.5s 0.7s infinite linear;
+                    }
+
+                    &:nth-child(19) {
+                        animation: load 1.5s 0.8s infinite linear;
+                    }
+
+                    &:nth-child(20) {
+                        animation: load 1.5s 0.9s infinite linear;
+                    }
+
+                    &:nth-child(21) {
+                        animation: load 1.5s 1s infinite linear;
+                    }
+                }
+            }
+
+            .displayNone {
+                display: none;
+            }
+
+            .active {
+                animation: holdingOpacity 0.2s linear;
+                animation-fill-mode: forwards;
+                //  opacity: 1;
+            }
+        }
+
+        .text-box {
+            position: absolute;
+            bottom: 116px;
+            width: 100%;
+            text-align: center;
+            color: $textColor_1;
+            font-size: $fontH16;
+            opacity: 0.3;
+
+            h2 {
+                font-weight: 500;
+                color: #9ea3b1;
+            }
+
+            span {
+                color: #9ea3b1;
+            }
+
+            &.active {
+                animation: holdingOpacity 0.2s linear;
+                animation-fill-mode: forwards;
+            }
+        }
+
+        //新版语音
+        .video-content-btn {
+            width: 100%;
+            height: 0;
+            position: absolute;
+            left: 0;
+            top: calc(100% - 84px);
+            display: flex;
+            justify-content: center;
+            transition: all 1s;
+
+            // div {
+            //     width: 70px;
+            //     height: 70px;
+            //     color: $textColor_1;
+            //     background: #4e4f50;
+            //     border-radius: 50%;
+            //     display: flex;
+            //     align-items: center;
+            //     justify-content: center;
+            //     user-select: none;
+            //     i.iconyuyin {
+            //         font-size: $fontH24;
+            //     }
+            // }
+            .holding-bg {
+                position: absolute;
+                top: 60px;
+                width: 0;
+                height: 0;
+                border-radius: 0;
+            }
+
+            .cover {
+                user-select: none;
+                -webkit-touch-callout: none;
+                width: 100%;
+                height: 150px;
+                position: absolute;
+                z-index: 100;
+            }
+
+            .active {
+                animation: holdingBg 0.2s linear;
+                animation-fill-mode: forwards;
+            }
+
+            img {
+                user-select: none;
+                -webkit-touch-callout: none;
+                position: absolute;
+                top: 15px;
+                width: auto;
+                height: 40px;
+            }
+        }
+    }
+}
+
+.appBottom {
+    user-select: none;
+    //   height: 60px;
+    width: 100%;
+    height: 54px;
+    // height: calc(60px+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
+    // height: calc(54px+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
+
+    // height: calc(60px + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
+    // height: calc(54px + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
+    // background-image: url("../images/appBottomBg-black.png");
+    background-color: var(--snapshot-item-bg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    // position: absolute;
+    bottom: 0px;
+    z-index: 8;
+
+    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
+
+    .iconItem {
+        width: 75px;
+        height: 20px;
+        // margin-top: 8px;
+        color: white;
+
+        i {
+            font-size: 24px;
+        }
+
+        .voice-txt {
+            position: absolute;
+            font-size: 10px;
+            color: var(--appBottom-color);
+            bottom: 7px;
+        }
+    }
+
+    .iconItem:nth-child(3) {
+        width: 83px;
+        height: 69px;
+
+        // transform: translateY(-8px);
+        // margin-top: 4px;
+        img {
+            user-select: none;
+            // width: 100%;
+            height: auto;
+        }
+    }
+
+    .bottom-item {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        color: var(--appBottom-color);
+
+        .bottom-item-icon {
+            font-size: 24px;
+            margin-bottom: 4px;
+        }
+
+        .bottom-item-txt {
+            font-size: 10px;
+        }
+    }
+
+    .bottom-item-active {
+        color: #5697ff;
+    }
+
+    // .voice-container {
+    //     width: 100%;
+    //     height: 100%;
+    //     position: absolute;
+    //     left: 0;
+    //     bottom: 0;
+    //     z-index: 499;
+    //     background: rgba(0, 0, 0, 0.5);
+    //     & > div {
+    //         width: 90%;
+    //         bottom: 80px;
+    //         margin: auto;
+    //         position: absolute;
+    //         margin-left: 5%;
+    //         background: white;
+    //         padding: 1rem;
+    //         border-radius: 6px;
+    //         & > p {
+    //             text-align: center;
+    //             margin-bottom: 1rem;
+    //         }
+    //         & > div {
+    //             width: 200px;
+    //             height: 200px;
+    //             margin: auto;
+    //             border: 1px solid red;
+    //         }
+    //     }
+    // }
+
+    @keyframes load {
+        0% {
+            background: #3894f7;
+            margin-top: 35px;
+            height: 15%;
+        }
+
+        50% {
+            background: #3894f7;
+            height: 100%;
+            margin-top: 0%;
+        }
+
+        100% {
+            background: #3894f7;
+            height: 15%;
+            margin-top: 35px;
+        }
+    }
+
+    @keyframes holdingOpacity {
+        50% {
+            opacity: 0.5;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes holdingBg {
+        50% {
+            top: 30px;
+            width: 60%;
+            height: 40px;
+            border-radius: 50%;
+            background: var(--voice-holdingAni);
+        }
+
+        100% {
+            top: 0;
+            width: 120%;
+            height: 150px;
+            border-radius: 100% 100% 0 0;
+            background: var(--voice-holdingAni);
+        }
+    }
+
+    @keyframes holdingBg2 {
+        50% {
+            top: 30px;
+            width: 60%;
+            height: 40px;
+            border-radius: 50%;
+            background: linear-gradient(180deg, #ffffff 0%, #f5f6f6 100%);
+        }
+
+        100% {
+            top: 0;
+            width: 120%;
+            height: 150px;
+            border-radius: 100% 100% 0 0;
+            background: linear-gradient(180deg, #ffffff 0%, #f5f6f6 100%);
+        }
+    }
+}

package/ganwei-app-6.2.1/packages/ganwei-app-empty-page/src/components/appFrame/css/top.scss

@@ -0,0 +1,49 @@
+.appTop {
+    @include userselect;
+    width: 100%;
+    // height: 48px;
+    // font-size: 34px;
+    //   background-color: #252833;
+    background-color: var(--appFrameMain-bg);
+    color: var(--appTop-color);
+    padding: 0 16px;
+    box-sizing: border-box;
+
+    &.scrollable {
+        background: var(--appTop-scrollBg);
+        // opacity: 0.9;
+        backdrop-filter: blur(22px);
+        z-index: 1000;
+    }
+
+    .leftText {
+        font-size: 34px;
+        margin-top: 14px;
+        margin-bottom: 22px;
+    }
+
+    .leftIcon {
+        height: 48px;
+        line-height: 48px;
+        font-size: 20px;
+    }
+
+    .iconTip {
+        font-size: 14px;
+    }
+
+    .left,
+    .center,
+    .right {
+        min-width: 20px;
+    }
+
+    .header-center {
+        font-size: 18px;
+        font-weight: 600;
+    }
+}
+
+.marginBottom {
+    padding-bottom: 10px;
+}