供应商落地页

pages/login/components/basicOperationsProducts.vue

@@ -0,0 +1,42 @@
+<template>
+    <view class="basicoperation">
+        <slot name="supplier-title"></slot>
+        <view class="basicoperation_container">
+            <image class="defalut author" v-if="!show" src="@/static/supplier-login/basicoperation/author-default.png" mode=""></image>
+            <image class="defalut store" v-if="!show" src="@/static/supplier-login/basicoperation/store-default.png" mode=""></image>
+            <image class="defalut author-empty" v-if="show" src="@/static/supplier-login/basicoperation/author-empty.png" mode=""></image>
+            <image class="defalut store-empty" v-if="show" src="@/static/supplier-login/basicoperation/store-empty.png" mode=""></image>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            show: false,
+        }
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.defalut {
+    width: 610rpx;
+    height: 570rpx;
+    position: absolute;
+    border: 1px solid;
+    box-sizing: border-box;
+}
+.basicoperation {
+    padding: 1px;
+    box-sizing: border-box;
+    background-color: #fff;
+    .basicoperation_container {
+        height: 690rpx;
+        padding: 0 70rpx;
+        box-sizing: border-box;
+        position: relative;
+    }
+}
+</style>

pages/login/components/caimei-about.vue

@@ -0,0 +1,77 @@
+<template>
+    <view
+        class="about"
+        :style="{
+            background: 'url(' + bgImg + ')',
+            'background-repeat': 'no-repeat',
+            'background-size': '100% 100%'
+        }"
+    >
+        <slot name="supplier-title"></slot>
+        <view class="about-container">
+            <view class="about-explain">
+                <view class="about-bg"></view>
+                <view class="about-text">
+                    采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台，其核心资产包括采购
+                    信息中心，媒体矩阵，数字运营以及线上交易和供应链管理软件，建立了一个从信息引流到数字
+                    运营到交易结算一体化平台，站外引流站内运营，采购转化的闭环生态，采美平台以创造客户价值为核心，借助数字化营销的优
+                    势，赋能美业供应链上下游企业，共同打造一站式美业双线融合的供应链新生态。
+                </view>
+            </view>
+            <view>
+                <image class="about-achievement" src="@/static/supplier-login/caimeiabout/achievement.png" mode=""></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            bgImg: require('@/static/supplier-login/caimeiabout/bg.png'),
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.about {
+    padding: 1px;
+    box-sizing: border-box;
+}
+.about-container {
+    padding: 0 70rpx;
+    box-sizing: border-box;
+    .about-explain {
+        width: 610rpx;
+        height: 760rpx;
+        position: relative;
+        margin-bottom: 78rpx;
+        .about-bg {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            background: #FFFFFF;
+            opacity: 0.2;
+            border-radius: 4rpx;
+        }
+        .about-text {
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            padding: 45rpx 34rpx;
+            color: #FFFFFF;
+            font-size: 32rpx;
+            line-height: 64rpx;
+        }
+    }
+    .about-achievement {
+        width: 610rpx;
+        height: 400rpx;
+        margin-bottom: 62rpx;
+    }
+}
+</style>

pages/login/components/caimei-video.vue

@@ -0,0 +1,68 @@
+<template>
+    <view class="video" :class="show ? 'video-show' : ''">
+        <video :src="videoSrc" class="videoRef"></video>
+        <view style="display: flex;width: 100%;flex-direction: row-reverse;" @click="cancel">
+            <image
+                src="@/static/supplier-login/close.png"
+                mode=""
+                class="iconfont icon-guanbi close"
+                :class="show ? 'video-show' : ''"
+            ></image>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        show: {
+            type: Boolean,
+            default: () => false
+        },
+        videoObj: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    data() {
+        return {}
+    },
+    methods: {
+        cancel() {
+            this.$emit('closeClick')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.video {
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    flex-direction: column-reverse;
+    z-index: 999;
+    position: fixed;
+    opacity: 0;
+    display: none;
+    left: 0;
+    top: 0;
+    .videoRef {
+        width: 80%;
+        height: 400rpx;
+    }
+}
+.video-show {
+    opacity: 1;
+    display: flex !important;
+}
+.close {
+    width: 80rpx;
+    height: 80rpx;
+    margin-bottom: 30rpx;
+    margin-right: 8%;
+}
+</style>

pages/login/components/markeServices.vue

@@ -0,0 +1,143 @@
+<template>
+    <view class="server">
+        <swiper
+            :indicator-dots="true"
+            :autoplay="true"
+            :interval="3000"
+            :duration="1000"
+            indicator-color="rgba(0, 0, 0, 0.5)"
+            indicator-active-color="rgba(255, 91, 0, 1)"
+        >
+            <swiper-item v-for="item in bannerList" :key="item.id">
+                <view class="swiper-item">
+                    <image class="img" :src="item.url"></image>
+                </view>
+            </swiper-item>
+        </swiper>
+        <slot name="supplier-title"></slot>
+        <scroll-view scroll-x="true" class="scroll-view">
+            <view class="server_item" v-for="item in server_card_list" :key="item.id">
+                <image :src="item.img" mode="" class="card_img"></image>
+                <text class="card_title">{{item.title}}</text>
+                <text class="card_text" v-for="text, index in item.content" :key="index">{{text.text}}</text>
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            bannerList: [
+                {
+                    id: 0,
+                    url: require('@/static/supplier-login/banner-01.png')
+                },
+                {
+                    id: 1,
+                    url: require('@/static/supplier-login/banner-02.png')
+                }
+            ],
+            // 卡片内容
+            server_card_list: [
+                {
+                    id: 1, 
+                    title: '全渠道获客',
+                    img: require('@/static/supplier-login/server/01.png'),
+                    content: [
+                        {
+                            text: '精准投放推广内容触达B端客户',
+                        },
+                        {
+                            text: '精准识别全渠道匿名用户线索',
+                        }
+                    ]
+                },
+                {
+                    id: 2,
+                    title: '潜客运营',
+                    img: require('@/static/supplier-login/server/02.png'),
+                    content: [
+                        {
+                            text: '潜客筛选',
+                        },
+                        {
+                            text: '精细化分层运营',
+                        },
+                        {
+                            text: '精准推送内容'
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    title: '销售转化',
+                    img: require('@/static/supplier-login/server/03.png'),
+                    content: [
+                        {
+                            text: '全链条商机管理，用户线索流程清晰，高效流转'
+                        },
+                        {
+                            text: '全场景交易平台，线上线下一体化把握每一条商机'
+                        },
+                        {
+                            text: '全方位售后服务，延长客户生命周期、提高复购率'
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+}
+</script>
+
+<style scoped lang="scss">
+    .server {
+        background-color: #fff;
+    }
+swiper {
+    height: 360rpx;
+}
+.swiper-item {
+    height: 100%;
+    width: 100%;
+}
+.img {
+    width: 100%;
+    height: 100%;
+}
+.server_item {
+    width: 550rpx;
+    height: 610rpx;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: column;
+    margin: 10rpx 20rpx;
+    align-items: center;
+    box-shadow: 0rpx 1rpx 16rpx 0rpx rgba(102, 102, 102, 0.3);
+    .card_title {
+        color: #333333;
+        font-size: 36rpx;
+        font-weight: 500;
+        margin-bottom: 20rpx;
+    }
+    .card_text {
+        color: #707070;
+        font-size: 24rpx;
+        margin-top: 10rpx;
+    }
+    .card_img {
+        width: 216rpx;
+        height: 216rpx;
+        margin: 80rpx 0 40rpx 0;
+    }
+}
+.scroll-view {
+    white-space: nowrap;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 56rpx;
+    height: 640rpx;
+}
+</style>

pages/login/components/menuTopDropdown.vue

@@ -0,0 +1,109 @@
+<template>
+	<view>
+		<view
+			class="dropdown dropdown-box"
+			:class="[show ? 'dropdown-show' : '']"
+			:style="{
+				height: height ? px(height) : 'auto',
+				backgroundColor: backgroundColor,
+				paddingBottom: px(paddingbtm),
+				transform: 'translateZ(0) translateY(' + (show ? px(translatey) : '-100%') + ')'
+			}"
+		>
+			<slot></slot>
+		</view>
+		<view @touchmove.stop.prevent class="dropdown-mask" :style="{top: px(maskTop)}" :class="[mask && show ? 'mask-show' : '']" @tap="handleClose"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'TopDropdown',
+	props: {
+		//是否需要mask
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		//控制显示
+		show: {
+			type: Boolean,
+			default: false
+		},
+		//背景颜色
+		backgroundColor: {
+			type: String,
+			default: '#fff'
+		},
+		//padding-bottom  rpx
+		paddingbtm: {
+			type: Number,
+			default: 0
+		},
+		//高度 rpx
+		height: {
+			type: Number,
+			default: 580
+		},
+		//移动距离 需要计算
+		translatey: {
+			type: Number,
+			default: 0
+		},
+        // mask 的位置
+        maskTop: {
+            type: Number,
+            default: 0
+        }
+	},
+	methods: {
+		handleClose() {
+			if (!this.show) {
+				return
+			}
+			this.$emit('close', {})
+		},
+		px(num) {
+			return uni.upx2px(num) + 'px'
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.dropdown-box {
+	width: 100%;
+	position: fixed;
+	box-sizing: border-box;
+	border-bottom-right-radius: 24rpx;
+	border-bottom-left-radius: 24rpx;
+	transform: translateZ(0);
+	overflow: hidden;
+	/* visibility: hidden; */
+	transition: all 0.3s ease-in-out;
+	z-index: 996;
+	top: 0;
+    left: 0;
+}
+
+.dropdown-show {
+	/* visibility: visible; */
+}
+
+.dropdown-mask {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	z-index: 986;
+	transition: all 0.3s ease-in-out;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.mask-show {
+	opacity: 1;
+	visibility: visible;
+}
+</style>

pages/login/components/scenarioMarketing.vue

@@ -0,0 +1,153 @@
+<template>
+    <view class="scenariomarketing">
+        <slot name="supplier-title"></slot>
+        <view class="scenario-container">
+            <view class="scenario-item" v-for="item in filterScenarioList" :key="item.id">
+                <view class="scenario-title">{{item.title}}</view>
+                <view class="scenario-contant">{{item.contant}}</view>
+                <image class="scenario-img" :src="item.url" mode=""></image>
+            </view>
+            <view class="more" v-if="filterScenarioList.length < 10" @click="() => {filterScenarioList = ScenarioList}">
+                展开查看更多
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            ScenarioList: [
+                {
+                    id: 1,
+                    title: '信息平台',
+                    contant: '集创作、发布、客户资源收集于一体的美业内容输出平台；',
+                    url: require('@/static/supplier-login/scenariomarket/01.png')
+                },
+                {
+                    id: 2,
+                    title: '媒体矩阵',
+                    contant: '丰富媒体资源，助力品牌快速传播；',
+                    url: require('@/static/supplier-login/scenariomarket/02.png')
+                },
+                {
+                    id: 3,
+                    title: '正版图库',
+                    contant: '永久商业授权的专业医美正版图库；',
+                    url: require('@/static/supplier-login/scenariomarket/03.png')
+                },
+                {
+                    id: 4,
+                    title: 'SEO关键词',
+                    contant: '立足企业全局，进行关键词策划布局；',
+                    url: require('@/static/supplier-login/scenariomarket/04.png')
+                },
+                {
+                    id: 5,
+                    title: 'CRM系统',
+                    contant: '客户全生命周期数字化管理系统；',
+                    url: require('@/static/supplier-login/scenariomarket/05.png')
+                },
+                {
+                    id: 6,
+                    title: '认证通',
+                    contant: '一款专业的正品认证SaaS软件系统；',
+                    url: require('@/static/supplier-login/scenariomarket/06.png')
+                },
+                {
+                    id: 7,
+                    title: '美业社群',
+                    contant: '更紧密的联动用户，提高客户转化率；',
+                    url: require('@/static/supplier-login/scenariomarket/07.png')
+                },
+                {
+                    id: 8,
+                    title: '私域直播',
+                    contant: 'B2B企业直播平台，一键开启直播引流；',
+                    url: require('@/static/supplier-login/scenariomarket/08.png')
+                },
+                {
+                    id: 9,
+                    title: '分销体系',
+                    contant: '快速解决多方分账难题；',
+                    url: require('@/static/supplier-login/scenariomarket/09.png')
+                },
+                {
+                    id: 10,
+                    title: '会议营销',
+                    contant: '以客户体验为导向，促进现场商机转化成交；',
+                    url: require('@/static/supplier-login/scenariomarket/10.png')
+                },
+                {
+                    id: 11,
+                    title: '金融分期',
+                    contant: '缓解客户现金流压力，促进大额交易；',
+                    url: require('@/static/supplier-login/scenariomarket/11.png')
+                },
+                {
+                    id: 12,
+                    title: '交易商城',
+                    contant: '一站式管理客户资源，支持1V1线上交易；',
+                    url: require('@/static/supplier-login/scenariomarket/12.png')
+                }
+            ],
+            // 截取的H5列表
+            filterScenarioList: []
+        }
+    },
+    mounted() {
+        this.filterScenarioList = this.ScenarioList.filter(e => e.id <= 6)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.scenariomarketing {
+    padding: 1px;
+    box-sizing: border-box;
+    background-color: #f7f7f7;
+}
+.scenario-container {
+    padding: 0 70rpx 62rpx 70rpx;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 610rpx;
+    .more {
+        grid-column: 1 / span 2;
+        justify-content: center;
+        align-items: center;
+        background-color: #fff;
+        border: 1px solid #f0f0f0;
+        font-size: 28rpx;
+        color: #999999;
+        height: 158rpx;
+        display: flex;
+    }
+    .scenario-item {
+        height: 447rpx;
+        border: 1px solid #f0f0f0;
+        background-color: #fff;
+        box-sizing: border-box;
+        padding: 57rpx 40rpx 0 40rpx;
+        position: relative;
+        .scenario-title {
+            color: #202020;
+            font-size: 36rpx;
+        }
+        .scenario-contant {
+            color: #666666;
+            font-size: 24rpx;
+            line-height: 36rpx;
+            margin-top: 28rpx;
+        }
+        .scenario-img {
+            position: absolute;
+            right: 49rpx;
+            bottom: 40rpx;
+            width: 118rpx;
+            height: 118rpx;
+        }
+    }
+}
+</style>

pages/login/components/solution.vue

@@ -0,0 +1,187 @@
+<template>
+    <view
+        class="solution"
+        :style="{
+            background: 'url(' + bgImg + ')',
+            'background-repeat': 'no-repeat',
+            'background-size': '100% 100%'
+        }"
+    >
+        <slot name="supplier-title"></slot>
+        <view class="solution_container">
+            <view class="solution_item" v-for="item in solutionList" :key="item.id">
+                <view
+                    class="solution_item_bg"
+                    :style="{
+                        background: 'url(' + item.bgImg + ')',
+                        'background-repeat': 'no-repeat',
+                        'background-size': '100%'
+                    }"
+                >
+                    {{ item.title }}
+                </view>
+                <view class="solution_item_container">
+                    <view class="solution_text" v-for="(text, index) in item.content" :key="index">
+                        {{ text.text }}
+                    </view>
+                    <button type="default" class="solution_btn">查看解决方案</button>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            bgImg: require('@/static/supplier-login/solution/bg.png'),
+            // 解决方案内容
+            solutionList: [
+                {
+                    id: 1,
+                    title: '基础版',
+                    bgImg: require('@/static/supplier-login/solution/01.png'),
+                    content: [
+                        {
+                            text: '品牌商城入驻'
+                        },
+                        {
+                            text: '品牌内容宣发'
+                        },
+                        {
+                            text: '用户画像洞察'
+                        },
+                        {
+                            text: '客户旅程搭建'
+                        },
+                        {
+                            text: '客户线索跟踪'
+                        },
+                        {
+                            text: '线索转化'
+                        }
+                    ]
+                },
+                {
+                    id: 2,
+                    title: '高级版',
+                    bgImg: require('@/static/supplier-login/solution/02.png'),
+                    content: [
+                        {
+                            text: '基础版全部内容'
+                        },
+                        {
+                            text: '引流关键词策划和布局'
+                        },
+                        {
+                            text: '漏斗模型转化率评估'
+                        },
+                        {
+                            text: '数字营销内容策划'
+                        },
+                        {
+                            text: '客户线索跟踪'
+                        },
+                        {
+                            text: '线索转化'
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    title: '战略版',
+                    bgImg: require('@/static/supplier-login/solution/03.png'),
+                    content: [
+                        {
+                            text: '高级版全部内容'
+                        },
+                        {
+                            text: '设置销售目标'
+                        },
+                        {
+                            text: '数据模型策划和执行'
+                        },
+                        {
+                            text: '品牌私域运营及正品认证通'
+                        },
+                        {
+                            text: '开放平台全域销售系统'
+                        },
+                        {
+                            text: '保证销售目标的执行'
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.solution {
+    box-sizing: border-box;
+    padding: 1rpx;
+    margin-top: 120rpx;
+    .solution_container {
+        padding: 0 72rpx;
+        box-sizing: border-box;
+        .solution_item {
+            width: 606rpx;
+            height: 610rpx;
+            box-sizing: border-box;
+            display: flex;
+            margin-bottom: 60rpx;
+            .solution_item_bg {
+                display: flex;
+                align-items: center;
+                writing-mode: vertical-rl;
+                justify-content: center;
+                width: 140rpx;
+                font-size: 56rpx;
+                color: #ffffff;
+                font-weight: Bold;
+            }
+            .solution_item_container {
+                width: calc(100% - 140rpx);
+                height: 100%;
+                position: relative;
+                box-sizing: border-box;
+                padding: 63rpx 70rpx;
+                background-color: #fff;
+                .solution_text {
+                    font-size: 28rpx;
+                    color: #666666;
+                    line-height: 64rpx;
+                    position: relative;
+                    white-space: nowrap;
+                }
+                .solution_text::before {
+                    content: '';
+                    border: 1px solid #b2b2b2;
+                    width: 10rpx;
+                    height: 10rpx;
+                    position: absolute;
+                    left: -30rpx;
+                    top: 25rpx;
+                    transform: rotate(45deg);
+                }
+                .solution_btn {
+                    position: absolute;
+                    width: 220rpx;
+                    height: 72rpx;
+                    background: #FF5B00;
+                    border-radius: 4rpx;
+                    color: #fff;
+                    font-size: 28rpx;
+                    text-align: center;
+                    line-height: 72rpx;
+                    right: 40rpx;
+                    bottom: 48rpx;
+                }
+            }
+        }
+    }
+}
+</style>

pages/login/components/successCases.vue

@@ -0,0 +1,125 @@
+<template>
+    <view class="successCases">
+        <slot name="supplier-title"></slot>
+        <scroll-view scroll-x="true" class="scroll-view" @scroll="scrollX">
+            <view
+                class="swiper-item"
+                v-for="item in successcaseList"
+                :key="item.id"
+                :style="{ margin: item.id === 2 ? '40rpx' : '' }"
+            >
+                <view class="swiper-item-title">{{ item.title }}</view>
+                <view class="swiper-item-contant">{{ item.content }}</view>
+                <image :src="item.bg" mode="" class="swiper-item-img"></image>
+            </view>
+        </scroll-view>
+        <view class="scroll-dots">
+            <view class="scroll-dot" :class="isActive && 'isActive'"></view>
+            <view class="scroll-dot" :class="!isActive && 'isActive'"></view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            successcaseList: [
+                {
+                    id: 1,
+                    title: '私域流量运营难',
+                    content:
+                        '来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧无法精准触达用户、回收市场数据。采美采用B2B2C私域运营模式对该品牌及竞品进行全面分析，对比两者之间的优势和劣势，为需要宣传的品牌进行关键词组布局，在采美商城优先进行品牌曝光度。并通过认证通、采美社群等工具，向B端客户推送相关活动，刺激B端客户向C端客户进一步传播品牌形象和实力，从而吸引更多的B端客户来访；采美CRM系统对来访客户做用户行为轨迹跟踪，完善用户画像，帮助品牌精准获取客户资料，筛选出优质客户。既提高该品牌的知名度，又保证了用户数据的精准度。',
+                    bg: require('@/static/supplier-login/successcases/01.png')
+                },
+                {
+                    id: 2,
+                    title: '营销获客难',
+                    content:
+                        '连续七年专注敏感肌肤的皮肤管理品牌,在法国荣获全球护肤品创新品牌大奖，品牌实力不容小觑，但由于对B端机构宣传不足,在营销获客上十分艰难。采美团队通过前期市场调研分析后提炼了B端关键词并进行布局，将品牌专利技术的相关内容在采美媒体矩阵同步分发，最终形成全渠道、全链路整合内容营销；将旗下产品搭配导入仪器做联合活动，双向锁定潜在客户，客户询盘量显著增长，解决了单一产品销售难的问题。',
+                    bg: require('@/static/supplier-login/successcases/02.png')
+                }
+            ],
+            isActive: true
+        }
+    },
+    methods: {
+        scrollX($event) {
+            $event.detail.scrollLeft > 260 && (this.isActive = false)
+            $event.detail.scrollLeft < 100 && (this.isActive = true)
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.successCases {
+    padding: 1px;
+    box-sizing: border-box;
+    background-color: #fff;
+    position: relative;
+}
+.scroll-view {
+    height: 1400rpx;
+    padding-left: 32rpx;
+    width: 100%;
+    box-sizing: border-box;
+    white-space: nowrap;
+    position: relative;
+    background-color: #fff;
+}
+.swiper-item {
+    width: 566rpx;
+    height: 1124rpx;
+    box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(102, 102, 102, 0.3);
+    background: #ffffff;
+    margin: 40rpx 0 40rpx 40rpx;
+    box-sizing: border-box;
+    padding: 50rpx;
+    overflow-wrap: break-word;
+    white-space: normal;
+    display: inline-flex;
+    flex-direction: column;
+    position: relative;
+    align-items: center;
+}
+.swiper-item-title {
+    color: #333333;
+    font-size: 32rpx;
+    font-weight: 600;
+}
+.swiper-item-contant {
+    font-size: 24rpx;
+    color: #666666;
+    line-height: 48rpx;
+    overflow-wrap: break-word;
+    white-space: normal;
+    margin-top: 40rpx;
+}
+.swiper-item-img {
+    width: 468rpx;
+    height: 274rpx;
+    position: absolute;
+    left: 48rpx;
+    bottom: 40rpx;
+}
+.scroll-dots {
+    position: absolute;
+    left: 50%;
+    bottom: 140rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: translateX(-50%);
+    .scroll-dot {
+        width: 12rpx;
+        height: 12rpx;
+        border-radius: 50%;
+        background-color: #FFBD99;
+        margin-right: 16rpx;
+    }
+}
+.isActive {
+    background: #ff5b00 !important;
+}
+</style>

pages/login/components/supplier-loginMenu.vue

@@ -0,0 +1,180 @@
+<template>
+    <view>
+        <view class="login_menu">
+            <image class="logo" src="@/static/supplier-login/logo_.png" mode=""></image>
+            <view class="menu_slide">
+                <scroll-view
+                    scroll-x="true"
+                    class="scroll-view"
+                    @scroll="scroll"
+                    :scroll-into-view="activeMenu"
+                    :scroll-with-animation="true"
+                >
+                    <view
+                        :id="'item' + item.id"
+                        class="scroll_menu"
+                        v-for="item in menuList"
+                        @click="handlerActiveLink(item)"
+                        :key="item.id"
+                    >
+                        {{ item.title }}
+                    </view>
+                </scroll-view>
+            </view>
+            <view class="check_menu" @click="scrollintoview">
+                <text class="cell-more iconfont icon-xiayibu" :class="actbtn ? 'act-btn' : ''"></text>
+            </view>
+        </view>
+        <MenuTopDropdown :show="dropdownShow" @close="closeTopDrop" translatey="100" height="260" maskTop="100">
+            <view class="menuList">
+                <button type="default">全部目录</button>
+                <button
+                    type="default"
+                    class="menu-btn"
+                    :class="isActive === item.id ? 'isActive' : ''"
+                    v-for="item in menuList"
+                    :key="item.id"
+                    @click="handlerNavLink(item)"
+                >
+                    {{ item.title }}
+                </button>
+            </view>
+        </MenuTopDropdown>
+    </view>
+</template>
+
+<script>
+import MenuTopDropdown from './menuTopDropdown'
+export default {
+    components: {
+        MenuTopDropdown
+    },
+    props: {
+        menuList: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            activeMenu: '', // 滚动id
+            dropdownShow: false,
+            isActive: 0, // 活动链接
+            actbtn: false
+        }
+    },
+    watch: {},
+    methods: {
+        // 滚动菜单
+        scroll($event) {
+            this.activeMenu = ''
+        },
+        scrollintoview() {
+            // this.activeMenu = 'item4'
+            this.dropdownShow = !this.dropdownShow
+            this.actbtn = !this.actbtn
+        },
+        closeTopDrop() {
+            this.dropdownShow = false
+            this.actbtn = false
+        },
+        handlerNavLink($event) {
+            this.isActive = $event.id
+            this.activeMenu = 'item' + $event.id
+            this.dropdownShow = false
+            this.actbtn = false
+            this.$emit('scrollPage', this.activeMenu)
+        },
+        handlerActiveLink($event) {
+            this.isActive = $event.id
+            this.activeMenu = 'item' + $event.id
+            this.$emit('scrollPage', this.activeMenu)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.login_menu {
+    width: 100%;
+    height: 100rpx;
+    background-color: #fff;
+    box-shadow: 0rpx 5rpx 14rpx 0rpx rgba(51, 51, 51, 0.12);
+    box-sizing: border-box;
+    padding: 26rpx 40rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 999;
+}
+.logo {
+    width: 132rpx;
+    height: 48rpx;
+}
+.scroll-view {
+    white-space: nowrap;
+    width: 100%;
+}
+.menu_slide {
+    width: 530rpx;
+    box-sizing: border-box;
+    padding: 0 106rpx 0 40rpx;
+    .scroll_menu {
+        width: 150rpx;
+        font-size: 28rpx;
+        color: #333;
+        display: inline-block;
+        text-align: center;
+        box-sizing: border-box;
+        padding-left: 20rpx;
+    }
+}
+.check_menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 148rpx;
+    height: 100rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    box-shadow: -10px 0px 10px 0 #fff;
+}
+.menuList {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    align-items: center;
+}
+.menu-btn {
+    width: 148rpx;
+    height: 64rpx;
+    background: #f5f5f5;
+    border-radius: 32rpx;
+    font-size: 24rpx;
+    text-align: center;
+    color: #666666;
+    line-height: 64rpx;
+}
+.isActive {
+    border: 1px solid #ff5b00;
+    color: #ff5b00;
+    background: #fff;
+}
+.iconfont {
+    transition: 0.2s;
+}
+.icon-xiayibu {
+    transform: rotate(90deg);
+}
+.act-btn {
+    transform: rotate(270deg) !important;
+}
+</style>

pages/login/components/supplier-title.vue

@@ -0,0 +1,42 @@
+<template>
+    <view>
+        <view class="title" :style="{color: titlecolor}">{{title}}</view>
+        <view class="subtitle" v-html="subtitle" :style="{color: subtitlecolor}"></view>
+    </view>
+</template>
+
+<script>
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: () => ''
+            },
+            subtitle: {
+                type: String,
+                default: () => ''
+            },
+            titlecolor: {
+                type: String,
+                default: () => '#333333'
+            },
+            subtitlecolor: {
+                type: String,
+                default: () => '#707070'
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .title {
+        margin-top: 122rpx;
+        text-align: center;
+        font-size: 44rpx;
+    }
+    .subtitle {
+        margin: 20rpx 0 100rpx 0;
+        text-align: center;
+        font-size: 28rpx;
+    }
+</style>

pages/login/components/swiper-dots.vue

@@ -0,0 +1,39 @@
+<template>
+    <view class="dots">
+        <view class="dot" v-for="item in pageAll" :key="item" :class="isActive === item ? 'active' : ''"></view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        pageAll: {
+            type: Number,
+            default: () => 0
+        },
+        isActive: {
+            type: Number,
+            default: () => 0
+        }
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.dots {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .dot {
+        width: 12rpx;
+        height: 12rpx;
+        border-radius: 50%;
+        background: rgba(255, 91, 0, 0.4);
+        margin-right: 20rpx;
+    }
+}
+.active {
+    background: #FF5B00 !important;
+}
+</style>

pages/login/supplier_information.vue

@@ -0,0 +1,68 @@
+<template>
+    <view>
+        <view class="supplier_login"><login-menu :menuList="menuList" @scrollPage="scrollPage" /></view>
+        <view class="artform" v-html="artForm"></view>
+    </view>
+</template>
+
+<script>
+import LoginMenu from './components/supplier-loginMenu.vue'
+export default {
+    components: {
+        LoginMenu
+    },
+    data() {
+        return {
+            menuList: [
+                {
+                    id: 0,
+                    title: '营销服务'
+                },
+                {
+                    id: 1,
+                    title: '解决方案'
+                },
+                {
+                    id: 2,
+                    title: '运营产品'
+                },
+                {
+                    id: 3,
+                    title: '营销工具'
+                },
+                {
+                    id: 4,
+                    title: '成功案例'
+                },
+                {
+                    id: 5,
+                    title: '关于采美'
+                },
+                {
+                    id: 6,
+                    title: '增长社区'
+                }
+            ],
+            activeMenu: '',
+            artForm: ''
+        }
+    },
+    mounted() {
+        this.artForm = uni.getStorageSync('artForm')
+    },
+    methods: {
+        // 滚动事件
+        scrollPage($event) {
+            this.activeMenu = $event
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.artform {
+    margin-top: 220rpx;
+    padding: 0 40rpx 40rpx 40rpx;
+    box-sizing: border-box;
+}
+</style>

pages/login/supplier_login.vue

@@ -0,0 +1,362 @@
+<template>
+    <view>
+        <view class="supplier_login"><login-menu :menuList="menuList" @scrollPage="scrollPage" /></view>
+        <view class="container">
+            <scroll-view
+                class="scrollview"
+                @scroll="scrollView"
+                scroll-y="true"
+                :scroll-into-view="activeMenu"
+                :scroll-with-animation="true"
+            >
+                <view id="item0">
+                    <marke-service>
+                        <template #supplier-title>
+                            <supplier-title title="全生命周期陪跑服务" subtitle="采美，更专业的美业数字化因营销服务" />
+                        </template>
+                    </marke-service>
+                </view>
+                <view id="item1">
+                    <Solution>
+                        <template #supplier-title>
+                            <supplier-title title="解决方案" subtitle="满足企业全方位需求" />
+                        </template>
+                    </Solution>
+                </view>
+                <view id="item2">
+                    <basic-operation>
+                        <template #supplier-title>
+                            <supplier-title title="基础运营产品" subtitle="使企业走向数字化的基石" />
+                        </template>
+                    </basic-operation>
+                </view>
+                <view id="item3">
+                    <scenario-market>
+                        <template #supplier-title>
+                            <supplier-title title="场景营销工具" subtitle="多样化工具，全方位助力您的企业目标" />
+                        </template>
+                    </scenario-market>
+                </view>
+                <view id="item4">
+                    <success-cases>
+                        <template #supplier-title>
+                            <supplier-title
+                                title="成功案例"
+                                subtitle="了解已合作品牌的真实推广案例，借鉴成功经验<br />助力有效推广，实现商业目标"
+                            />
+                        </template>
+                    </success-cases>
+                </view>
+                <view id="item5">
+                    <caimei-about>
+                        <template #supplier-title>
+                            <supplier-title
+                                title="关于采美"
+                                subtitle="了解采美，合作共赢"
+                                titlecolor="#ffffff"
+                                subtitlecolor="#ffffff"
+                            />
+                        </template>
+                    </caimei-about>
+                </view>
+                <view id="item6">
+                    <growth-community @playVideo="playVideo">
+                        <template #supplier-title>
+                            <supplier-title title="增长社区" subtitle="数十年资深美业运营经验，教你快速成长" />
+                        </template>
+                    </growth-community>
+                </view>
+            </scroll-view>
+        </view>
+        <view class="supplier-slide">
+            <view class="user-cicle"></view>
+            <view class="slide">
+                <view
+                    class="slide-item"
+                    v-for="item in slideList"
+                    :key="item.id"
+                    v-if="item.isShow"
+                    @click="handlerChange(item)"
+                >
+                    <image class="slide-img" :src="item.slideBg" mode=""></image>
+                    <view class="slide-title">{{ item.title }}</view>
+                </view>
+            </view>
+        </view>
+        <tui-modal :show="show" custom @cancel="cancel">
+            <view class="tui-modal-custom">
+                <view class="tui-modal-custom-text">周一至周五 9:00~1800</view>
+                <view class="tui-modal-custom-phone" @click=";(modal = true), (show = false)">153-3889-7365</view>
+            </view>
+        </tui-modal>
+        <tui-modal :show="isPhone" class="qrcode" custom @cancel="cancel">
+           <view class="tui-modal-custom-qrcode">
+               <image style="width: 100%;height: 100%;" src="@/static/supplier-login/qr_code_kefu.png" mode=""></image>
+           </view>
+        </tui-modal>
+        <tui-modal :show="modal" custom @cancel="cancel">
+            <view class="tui-modal-custom-call">
+                <view class="tui-modal-custom-text">
+                    确定拨打
+                    <text style="color: #FF5B00;font-weight: bold;margin: 0 6rpx;">153-3889-7365</text>
+                    吗？
+                </view>
+                <view class="modal-btns">
+                    <tui-button
+                        class="cancel"
+                        type="black"
+                        @click="modal = false"
+                        height="72rpx"
+                        :size="28"
+                        plain
+                        shape="circle"
+                    >
+                        取消
+                    </tui-button>
+                    <tui-button
+                        class="determine"
+                        height="72rpx"
+                        :size="28"
+                        type="warning"
+                        shape="circle"
+                        @click="handleClick"
+                    >
+                        确定
+                    </tui-button>
+                </view>
+            </view>
+        </tui-modal>
+        <cm-video :show="showVideo" @closeClick="closeVideo"/>
+    </view>
+</template>
+
+<script>
+import LoginMenu from './components/supplier-loginMenu.vue'
+import MarkeService from './components/markeServices.vue'
+import SupplierTitle from './components/supplier-title.vue'
+import Solution from './components/solution.vue'
+import BasicOperation from './components/basicOperationsProducts.vue'
+import ScenarioMarket from './components/scenarioMarketing.vue'
+import SuccessCases from './components/successCases.vue'
+import CaimeiAbout from './components/caimei-about.vue'
+import GrowthCommunity from './components/growthCommunity.vue'
+import CmVideo from './components/caimei-video.vue'
+export default {
+    components: {
+        LoginMenu,
+        MarkeService,
+        SupplierTitle,
+        Solution,
+        BasicOperation,
+        ScenarioMarket,
+        SuccessCases,
+        CaimeiAbout,
+        GrowthCommunity,
+        CmVideo
+    },
+    data() {
+        return {
+            menuList: [
+                {
+                    id: 0,
+                    title: '营销服务'
+                },
+                {
+                    id: 1,
+                    title: '解决方案'
+                },
+                {
+                    id: 2,
+                    title: '运营产品'
+                },
+                {
+                    id: 3,
+                    title: '营销工具'
+                },
+                {
+                    id: 4,
+                    title: '成功案例'
+                },
+                {
+                    id: 5,
+                    title: '关于采美'
+                },
+                {
+                    id: 6,
+                    title: '增长社区'
+                }
+            ],
+            activeMenu: '', // 滚动到指定位置
+            show: false,
+            isPhone: false,
+            modal: false,
+            showVideo: false,
+            slideList: [
+                {
+                    id: 1,
+                    title: '电话联系',
+                    slideBg: require('@/static/supplier-login/phone.png'),
+                    isShow: true
+                },
+                {
+                    id: 2,
+                    title: '微信客服',
+                    slideBg: require('@/static/supplier-login/qrcode.png'),
+                    isShow: true
+                },
+                {
+                    id: 3,
+                    title: '',
+                    slideBg: require('@/static/supplier-login/scrolltop.png'),
+                    isShow: false
+                }
+            ]
+        }
+    },
+    computed: {},
+    watch: {},
+    methods: {
+        // 滚动事件
+        scrollPage($event) {
+            this.activeMenu = $event
+        },
+        scrollView(e) {
+            this.activeMenu = ''
+            if (e.detail.scrollTop < 50) {
+                this.slideList[2].isShow = false
+            } else {
+                this.slideList[2].isShow = true
+            }
+        },
+        handlerChange(e) {
+            const obj = {
+                1: () => (this.show = true),
+                2: () => (this.isPhone = true),
+                3: () => (this.activeMenu = 'item0')
+            }
+            obj[e.id]()
+        },
+        hideAlert() {
+            this.show = false
+        },
+        // 拨打电话
+        handleClick() {
+            uni.makePhoneCall({
+                phoneNumber: '153-3889-7365' //仅为示例
+            })
+            this.modal = false
+        },
+        cancel() {
+            this.modal = false
+            this.show = false
+            this.isPhone = false
+        },
+        // 视频播放
+        playVideo() {
+            this.showVideo = true
+        },
+        // 视频关闭
+        closeVideo() {
+            this.showVideo = false
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    position: absolute;
+    bottom: 0;
+    height: auto;
+}
+.scrollview {
+    width: 100%;
+    height: calc(100vh - 120rpx);
+    background-color: #fff;
+}
+.supplier-slide {
+    position: fixed;
+    right: 40rpx;
+    box-sizing: border-box;
+    width: 100rpx;
+    bottom: 100rpx;
+    z-index: 999;
+    .user-cicle {
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 50%;
+        background-color: #fff;
+        margin-bottom: 40rpx;
+        box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(51, 51, 51, 0.16);
+    }
+    .slide {
+        width: 100rpx;
+        overflow: hidden;
+        border-radius: 50rpx;
+        background-color: #ff5b00;
+        box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(255, 91, 0, 0.3);
+        .slide-img {
+            width: 45rpx;
+            height: 45rpx;
+        }
+        .slide-item {
+            height: 140rpx;
+            width: 100rpx;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            box-sizing: border-box;
+            padding-top: 30rpx;
+            border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
+            .slide-title {
+                margin-top: 10rpx;
+                font-size: 20rpx;
+                color: #fff;
+            }
+        }
+    }
+}
+.tui-modal-custom {
+    padding: 30rpx 80rpx;
+}
+.tui-modal-custom-text {
+    text-align: center;
+    color: #666666;
+    font-size: 28rpx;
+}
+.tui-modal-custom-phone {
+    margin-top: 62rpx;
+    text-align: center;
+    color: #ff5b00;
+    border-bottom: 1px solid #ff5b00;
+    font-size: 40rpx;
+    font-weight: bold;
+}
+.tui-modal-custom-call {
+    font-size: 32rpx;
+    color: #666666;
+    padding-top: 50rpx;
+}
+.qrcode {
+    ::v-deep .tui-modal-box {
+        width: auto !important;
+        padding: 6rpx !important;
+    }
+    .tui-modal-custom-qrcode {
+        width: 412rpx;
+        height: 412rpx;
+    }
+}
+.modal-btns {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 62rpx;
+    .cancel {
+        width: 200rpx !important;
+        color: #666666 !important;
+    }
+    .determine {
+        width: 200rpx !important;
+    }
+}
+</style>