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>