caimei-applets-caimei/pages/login/components/basicOperationsProducts.vue

<template>
    <view class="basicoperation">
        <slot name="supplier-title"></slot>
        <view class="basicoperation_container">
           <image class="defalut author-empty" :style="{'z-index': isOnline ? 0 : 13}" src="https://static.caimei365.com/app/img/supplier-login/basicoperation/author-empty.png" mode="aspectFill"></image>
           <image class="defalut store-empty" :style="{'z-index': isOnline ? 12 : 0}" src="https://static.caimei365.com/app/img/supplier-login/basicoperation/store-empty.png" mode="aspectFill"></image>
           <view class="operation_store" v-if="isOnline">
               <view class="online_store">
                   <view class="store-logo">
                       <image src="https://static.caimei365.com/app/img/supplier-login/basicoperation/store.png" class="store" mode=""></image>
                   </view>
                   <view class="store-title">
                       在线商城
                   </view>
               </view>
               <view class="store-line-title">
                   <image src="https://static.caimei365.com/app/img/supplier-login/basicoperation/title.png" style="width: 100%;height: 100%;" mode=""></image>
               </view>
               <view class="store-content">
                   <view class="content-item" v-for="item in online_store_list" :key="item.id">
                       <image :src="item.img" mode="" style="width: 80rpx;height: 50rpx;"></image>
                       <view class="store-content-title">
                           {{item.title}}
                       </view>
                       <view class="store-content-text">
                           {{item.content}}
                       </view>
                   </view>
               </view>
               <view class="author" @click="isOnline = false">
                   <view class="author-title">
                       正品认证通
                   </view>
                   <image style="width: 50rpx;height: 54rpx;"  src="https://static.caimei365.com/app/img/supplier-login/basicoperation/author.png" mode=""></image>
               </view>
           </view>
           <view class="operation-author" v-else>
               <view class="author">
                   <view class="author-logo">
                       <image style="width: 66rpx;
height: 68rpx;" src="https://static.caimei365.com/app/img/supplier-login/basicoperation/author.png" mode=""></image>
                   </view>
                   <view class="author-title">
                       正品认证通
                   </view>
               </view>
               <view class="author-title-logo">
                   <image src="https://static.caimei365.com/app/img/supplier-login/basicoperation/logo.png" style="width: 100%;height: 100%;" mode=""></image>
               </view>
               <view class="author-content-item">
                   <image src="https://static.caimei365.com/app/img/supplier-login/basicoperation/02.png" style="width: 50rpx;height: 50rpx;border-radius: 50%;" mode=""></image>
                    <view class="author-content-title">易装易用免维护</view>
                    <view class="author-content-split"></view>
                    <view class="author-content-text">独立后台账号体系、会打字就会用、公众号无缝衔接</view>
               </view>
               <view class="author-content-item">
                   <image src="https://static.caimei365.com/app/img/supplier-login/basicoperation/03.png" style="width: 50rpx;height: 50rpx;border-radius: 50%;" mode=""></image>
                    <view class="author-content-title">授权认证功能</view>
                    <view class="author-content-split"></view>
                    <view class="author-content-text">机构认证查询、设备认证查询、医师认证查询</view>
               </view>
               <view class="author-content-item">
                   <image src="https://static.caimei365.com/app/img/supplier-login/basicoperation/04.png" style="width: 50rpx;height: 50rpx;border-radius: 50%;" mode=""></image>
                    <view class="author-content-title">品牌运营</view>
                    <view class="author-content-split"></view>
                    <view class="author-content-text">与机构客户建立双向沟通渠道</view>
               </view>
               <view class="online-store" @click="isOnline = true">
                   <image src="https://static.caimei365.com/app/img/supplier-login/basicoperation/store.png" style="width: 72rpx;height: 68rpx;" mode=""></image>
                   <view class="online-store-logo">
                       在线商城
                   </view>
               </view>
           </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isOnline: true,
            online_store_list: [
                {
                    id: 1,
                    img: 'https://static.caimei365.com/app/img/supplier-login/basicoperation/p.png',
                    title: '品牌店铺搭建',
                    content: '轻松开启线上交易'
                },
                {
                    id: 2,
                    img: 'https://static.caimei365.com/app/img/supplier-login/basicoperation/l.png',
                    title: '品牌展露',
                    content: '彰显品牌实力'
                },
                {
                    id: 3,
                    img: 'https://static.caimei365.com/app/img/supplier-login/basicoperation/s.png',
                    title: '商品SKU管理',
                    content: '提高决策效率'
                }
            ]
        }
    },
    methods: {
    }
}
</script>

<style scoped lang="scss">
.defalut {
    width: 610rpx;
    height: 570rpx;
    position: absolute;
    box-sizing: border-box;
}
.store {
    width: 80rpx;
    height: 70rpx;
}
.basicoperation {
    padding: 1px;
    box-sizing: border-box;
    background-color: #fff;
    .basicoperation_container {
        height: 690rpx;
        padding: 0 70rpx;
        box-sizing: border-box;
        position: relative;
        .operation_store {
            position: absolute;
            box-sizing: border-box;
            padding: 36rpx 43rpx;
            width: 610rpx;
            height: 570rpx;
            z-index: 12;
            .online_store {
                width: 300rpx;
                height: 95rpx;
                border-bottom: 1px solid #FFCEAF;
                display: flex;
                align-items: center;
                .store-logo {
                    width: 72rpx;
                    height: 100%;
                    border-bottom: 2px solid #FFC39A;
                }
                .store-title {
                    color: #333333;
                    font-size: 40rpx;
                    font-weight: bold;
                    margin-left: 21rpx;
                    margin-top: -25rpx;
                }
            }
            .store-line-title {
                width: 100%;
                height: 90rpx;
                margin: 50rpx 0 33rpx 0;
            }
            .store-content {
                width: 100%;
                height: 216rpx;
                display: flex;
                justify-content: space-between;
                .content-item {
                    width: 172rpx;
                    height: 216rpx;
                    background: #FDF0E9;
                    border: 4rpx solid #FFFFFF;
                    box-shadow: 0rpx 6rpx 50rpx 0rpx rgba(255,91,0,0.24);
                    border-radius: 10rpx;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .store-content-title {
                        color: #333333;
                        font-size: 24rpx;
                        font-weight: bold;
                        margin: 30rpx 0 13rpx 0;
                    }
                    .store-content-text {
                        color: #666666;
                        font-size: 19rpx;
                        text-align: center;
                    }
                }
            }
            .author {
                position: absolute;
                right: 0;
                top: 0;
                width: 242rpx;
                height: 80rpx;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                .author-title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: white;
                    margin-right: 14rpx;
                }
            }
        }
        .operation-author {
            position: absolute;
            box-sizing: border-box;
            padding: 36rpx 36rpx;
            width: 610rpx;
            height: 570rpx;
            z-index: 13;
            .author {
                position: absolute;
                right: 30rpx;
                width: 275rpx;
                height: 110rpx;
                top: 12rpx;
                border-bottom: 1px solid #FFCEAF;
                display: flex;
                align-items: center;
                flex-direction: row-reverse;
                .author-logo {
                    width: 72rpx;
                    height: 100%;
                    box-sizing: border-box;
                    border-bottom: 2px solid #FFC39A;
                    padding-top: 17rpx;
                }
                .author-title {
                    color: white;
                    font-size: 40rpx;
                    font-weight: bold;
                }
            }
            .author-title-logo {
                width: 100%;
                height: 120rpx;
                margin-top: 130rpx;
            }
            .author-content-item {
                width: 100%;
                height: 70rpx;
                border-radius: 70rpx;
                border: 1px solid #FFC39A;
                box-sizing: border-box;
                padding: 2rpx;
                display: flex;
                align-items: center;
                margin-top: 18rpx;
                view {
                    height: 100%;
                    color: #FFC39A;
                    font-size: 20rpx;
                }
                .author-content-title {
                    font-size: 24rpx;
                    font-weight: bold;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 10rpx;
                }
                .author-content-split {
                    width: 2rpx;
                    height: 50%;
                    background-color: #FFC39A;
                    margin-right: 10rpx;
                }
                .author-content-text {
                    width: 278rpx;
                    display: flex;
                    align-items: center;
                }
            }
            .online-store {
                position: absolute;
                top: 0;
                left: 0;
                width: 250rpx;
                height: 100rpx;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 36rpx 0 36rpx 14rpx;
                .online-store-logo {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: black;
                    margin-left: 14rpx;
                }
            }
        }
    }
}
</style>