金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1057 lines
35 KiB

<template>
<block v-if="microData && microData.micro_page && microData.micro_page.meta">
<lf-nav title="主页" :spreadOut="false" :bgColor="nav_bg_color" :diy="true">
<view class="lf-nav-capsule" @click="$url('/pages/user/member/code')">
<text class="lf-iconfont icon-erweima"></text>
<text class="lf-m-l-4">会员</text>
</view>
<view class="lf-nav-capsule" @click="$msg('敬请期待')">
<text class="lf-iconfont icon-tingche"></text>
<text class="lf-m-l-4">停车</text>
</view>
<view class="lf-nav-capsule lf-bg-search" @click="$url('/pages/shop/search')">
<text class="lf-iconfont icon-sousuo"></text>
<text class="lf-m-l-4">搜索</text>
</view>
</lf-nav>
<view id="microData" :style="{background: microData.micro_page.meta.background_color}">
<block v-if="microData && microData.pages && microData.pages.length">
<view v-for="(item, index) in microData.pages" :key="index">
<!--轮播图组件-->
<view v-if="item.name == 'micro_page_componet_slide' && item.value && item.value.length">
<indexBanner :banner-data="item.value" :banner-title="item.title" :screen-width="screenWidth" :show="item.is_show_title" :meta="item.meta"></indexBanner>
</view>
<!--快捷导航-->
<view v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<indexNav :nav-data="item.value" :meta="item.meta"></indexNav>
</view>
<!-- 今日头条 -->
<view class="fuwu-tips" v-if="item.name == 'micro_page_componet_article_-' || item.name == 'micro_page_componet_article_|'">
<view class="fuwu-tips-title">今日头条</view>
<view style="width: 100%;height: 100%;">
<!-- <text class="fuwu-tips-desc1">{{ item.title }}</text> -->
<u-notice-bar type="none" :volume-icon="false" mode="vertical" :list="item.value"></u-notice-bar>
<!-- <text class="fuwu-tips-desc1">线上商城全场限时包邮</text>
<text class="fuwu-tips-desc2">(部分品牌满额包邮)</text> -->
</view>
</view>
<!-- 活动页入口, 根据旧版魔方修改,一张图 -->
<view class="lf-activity" v-if="item.name == 'micro_page_componet_cube' && item.value && item.value.length && item.type == '1_1'" @click="$url(item.value[0].link)">
<image :src="item.value[0].image" mode="aspectFill"></image>
</view>
<!-- 新做秒杀模块,根据旧版秒杀修改 -->
<view v-if="item.name == 'micro_page_componet_seckill' && item.value && item.value.length">
<lf-seckill :list="item.value" :title="item.title"></lf-seckill>
</view>
<!-- 广告活动模块,根据旧版魔方修改,三张图 -->
<view v-if="item.name == 'micro_page_componet_cube' && item.value && item.value.length && (item.type == '3_1' || item.type == '3_2' || item.type == '3_3')">
<lf-multi-column-ad :cube-data="item.value"></lf-multi-column-ad>
</view>
<!-- 首页发现推荐模块 -->
<view v-if="item.name == 'micro_page_componet_discovery' && item.value && item.value.length">
<lf-index-find :list="item.value" :title="item.title" :showTitle="item.is_show_title"></lf-index-find>
</view>
<!-- 大牌不停推模块 - 店铺矩阵 -->
<view v-if="item.name == 'micro_page_componet_brand_supplier' && item.value && item.value.length">
<lf-index-shop-matrix :list="item.value" :showTitle="item.is_show_title" :title="item.title"></lf-index-shop-matrix>
</view>
<!-- 店铺商品展示模块 -->
<view v-if="item.name == 'micro_page_componet_brand_recommended' && item.value && item.value.length">
<!-- @click="$url('/pages/shop/goodsSpecial')" -->
<view class="lf-module-title" v-if="item.is_show_title">{{ item.title }}</view>
<lf-shop-goods-card :list="item.value" :main="item.main"></lf-shop-goods-card>
</view>
<!-- 为你推荐模块 -->
<view v-if="item.name == 'micro_page_componet_recommended' && item.value && item.value.length">
<view class="lf-module-title" v-if="item.is_show_title">{{ item.title }}</view>
<view style="padding: 0 11px;">
<lf-waterfall :ifsale="false" :list="transformList(item.value)"></lf-waterfall>
</view>
</view>
</view>
</block>
<view style="height: 20rpx;"></view>
</view>
<!-- 悬浮购物车入口 -->
<view class="fixed-right">
<view class="fixed-cart fixed-live" hover-class="lf-opacity" @click="goLive()" v-if="live_roomid">
<text class="lf-iconfont icon-zhibo icon-text"></text>
<text class="tips">直播间</text>
</view>
<view class="fixed-cart" hover-class="lf-opacity" @click="$url('/pages/store/cart/cart')">
<text class="lf-iconfont icon-gouwulan icon-text"></text>
<text class="tips">购物车</text>
<block v-if="$isRight(car_num)">
<view class="angle-mark" v-if="car_num<99">{{car_num || 0}}</view>
<view class="angle-mark" v-else>99+</view>
</block>
</view>
</view>
<!-- ad广告弹出组件 -->
<lf-ad-modal :value.sync="show_ad" :list="ad_modal_list"></lf-ad-modal>
<!-- 回到顶部组件 -->
<u-back-top :scrollTop="pageScrollTop" :icon-style="{color: '#fff', 'font-size': '50rpx'}" tips="TOP"></u-back-top>
<!-- tabbar组件 -->
<lf-tabbar />
</block>
</template>
<script>
import {pageLogin, getUrl,config,isBirthday,autoLogin} from '@/common/js/utils.js';
import indexBanner from '@/components/index-banner/index-banner';
import indexNav from "@/components/index-nav/index-nav";
import lfNav from '@/components/lf-nav/lf-nav.vue';
import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
import lfAdModal from '@/components/lf-adModal/lf-adModal.vue';
import lfIndexFind from '@/components/lf-indexFind/lf-indexFind.vue';
import lfIndexShopMatrix from '@/components/lf-indexShopMatrix/lf-indexShopMatrix.vue';
import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
import lfWaterfall from '@/components/lf-waterfall-index/lf-waterfall.vue';
import lfMultiColumnAd from '@/components/lf-multiColumnAd/lf-multiColumnAd.vue';
import lfSeckill from '@/components/lf-seckill/lf-seckill.vue';
var app = getApp();
export default {
data() {
return {
giftData:'',
is_showBirth:false,
is_show_about: true,
is_show_init: false,
banner: [],
indexData: {},
goods_arr: [],
topImage: [],
bestSalesGoods: [],
suit: [],
imgHeight: '',
screenWidth: 0,
currentDesc: 'news',
is_newGiftLogin: false,
isLogin: '',
noLoginGift: '',
// 未登录状态下的新人礼信息
loginGift: '',
// 登录状态下的新人礼信息
showNoGift: false,
// 用户是否关闭弹窗
showGift: false,
// 登录状态下是否弹窗
tapIndex: 0,
isShow: false,
goodsIndex: 0,
goodsList: [],
author: '',
scroll: true,
config: {},
wyBanner: '',
wyGoodsList: '',
userInfo: '',
microData:"",
is_login:'',// 是否是登陆状态
show_ad: false, // 是否显示ad广告
ad_modal_list: [], // ad广告列表
nav_bg_color: 'rgba(255,255,255,0)' ,// 导航背景颜色
car_num: 0,
live_roomid: 0,
page_options: {}
};
},
// 注册组件
components: {
indexBanner,
indexNav,
lfNav,
lfTabbar,
lfAdModal,
lfIndexFind,
lfIndexShopMatrix,
lfShopGoodsCard,
lfWaterfall,
lfMultiColumnAd,
lfSeckill
},
computed: {
transformList(){
return function(list=[]){
let new_list = list.map(item => {
return {
original_price: item.associate.market_price,
picture: item.associate.img,
pictures: [item.associate.img],
price: item.associate.max_price,
product_id: item.associate.id,
sale: item.associate.sale_count,
title: item.associate.name,
id: item.associate.id
}
});
return new_list;
}
}
},
onShow(e) {
this.getLiveRoom();
this.isLogin=!!this.$cookieStorage.get('user_token')
let toekn = this.$cookieStorage.get('user_token');
if (toekn) {
this.getUserInfo();
this.getcarNum();
}
// test....
this.is_newGiftLogin = app.globalData.giftLogin;
let is_info = this.$cookieStorage.get('gift_info');
if(!this.isLogin){
this.newPeopleGift();
}
if(this.isLogin && !is_info){
this.getPeopleGift();
}
},
// 生命周期
onLoad(e) {
// 进入开屏广告页
if(app.globalData.app_first_full){
getApp().globalData.app_first_full = false;
this.$url('/pages/index/openScreenAd/openScreenAd', {type: 'launch'});
}else if(app.globalData.app_first_alert){
getApp().globalData.app_first_alert = false;
this.getAlertAd();
}
// 第三方平台配置颜色
var gbConfig = this.$cookieStorage.get('globalConfig') || '';
this.config=gbConfig;
if (!gbConfig) {
let extConfig ={};
if (extConfig) {
this.setData({
config: extConfig,
})
}
}
wx.showLoading();
wx.getSystemInfo({
success: res => {
this.screenWidth = String(res.screenWidth);
}
});
this.page_options = e;
this.queryMicroData(e);
this.init(e);
},
// 页面滚动
onPageScroll(event){
if(event.scrollTop >= 100){
this.nav_bg_color = 'rgba(255,255,255,1)';
uni.setNavigationBarColor({
frontColor: "#000000",
backgroundColor: "#0000000"
})
}else{
this.nav_bg_color = 'rgba(255,255,255,0)';
uni.setNavigationBarColor({
frontColor: "#ffffff",
backgroundColor: "#FFFFFF"
})
}
},
//下拉刷新
onPullDownRefresh(){
wx.showLoading();
this.queryMicroData();
this.getLiveRoom();
},
// 方法,需要将小程序的方法都放到这个里面
methods: {
goLive() {
// this.$msg('敬请期待!');
// return
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=`+this.live_roomid
})
},
//获取直播房间号
getLiveRoom(){
this.$http.get({
api: '/api/live'
}).then(res => {
console.log('=======',res.data.data)
if(res.data.data != null) {
this.live_roomid = res.data.data.number;
}
uni.stopPullDownRefresh();
});
},
getAlertAd(){
this.$http.get({
api: '/api/ad'
}).then(res => {
let alert = res.data.data.alert;
this.alert = alert;
if(this.$isRight(alert)){
if(this.$shared.isValueType(alert.image) == 'array'){
this.ad_modal_list = alert.image;
}else{
this.ad_modal_list.push({
image: alert.image,
url: alert.url
})
}
this.show_ad = true;
}
});
},
close(){
this.setData({
showNoGift:false
})
var time = new Date(new Date().setHours(0,0,0,0)).getTime() + 86400000;
this.$cookieStorage.set('new_gift', true, time);
},
login(){
pageLogin(getUrl());
},
showModal(){
this.setData({
showNoGift:true
})
},
changeBirthday(){
this.is_showBirth = false;
var gift= this.$cookieStorage.get("birthday_gift");
gift.flag=true;
this.$cookieStorage.set("birthday_gift",gift);
},
changeAbout() {
this.is_show_about = false;
},
getcarNum() {
this.$http
.get({
api: 'api/shopping/cart/count',
header: {
Authorization: this.$cookieStorage.get('user_token')
},
})
.then(res => {
if (res.data.code == 200) {
if(res.data.data == null) {
this.car_num = 0;
}else {
this.car_num = res.data.data;
}
} else {
wx.showModal({
content: '请下拉页面刷新重试',
showCancel: false
});
}
})
.catch(() => {
wx.stopPullDownRefresh();
wx.hideLoading();
wx.showModal({
content: '请求失败',
showCancel: false
});
});
},
// 请求数据
queryMicroData(e) {
let par = {};
if(typeof this.page_options.id != 'undefined'){
par.id = this.page_options.id;
}
this.$http
.get({
api: 'api/micro/page/index',
data: par
})
.then(res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
this.microData = '';
this.microData = res.data;
this.is_show_init = true;
let show_discover = this.$isRight(res.data.discover_status);
this.$store.commit('setTabbarItemShow', {index: 2, is_show: show_discover});
if (res.data && res.data.micro_page) {
wx.setNavigationBarTitle({
title: res.data.micro_page.name
});
}
uni.stopPullDownRefresh();
} else {
wx.showModal({
content: res.message || '请下拉页面刷新重试',
showCancel: false
});
}
} else {
wx.showModal({
content: '请下拉页面刷新重试',
showCancel: false
});
}
wx.stopPullDownRefresh();
wx.hideLoading();
})
.catch(() => {
wx.stopPullDownRefresh();
wx.hideLoading();
wx.showModal({
content: '请求失败',
showCancel: false
});
});
},
// 获取初始化数据
init(e) {
var token = this.$cookieStorage.get('user_token');
var agent_code = '';
if (e.agent_code) {
agent_code = e.agent_code
}
if (e.scene) {
var scene = decodeURIComponent(e.scene);
var sceneArr = scene.split(',');
if (sceneArr.length > 0) {
agent_code = sceneArr[1]
}
}
this.$http.get({
api: 'api/system/init'
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
if (res.data && res.data.other_technical_support) {
this.author = res.data.other_technical_support
}
/*wx.setNavigationBarTitle({
title: res.data.mini_home_title
})*/
this.$cookieStorage.set('init_info', res.data.h5_share);
this.$cookieStorage.set('service_info', res.data.online_service_data);
this.$cookieStorage.set('distribution_valid_time', res.data.distribution_valid_time);
this.$cookieStorage.set('init', res.data);
this.setCode(e);
// #ifdef MP-WEIXIN
if (agent_code && res.data.mini_program_login_type == 'default' && !token) {
wx.showLoading({
title: '正在自动登录',
mask: true
})
wx.login({
success: res => {
if (res.code) {
autoLogin(res.code, agent_code)
.then(res => {
if (res.status) {
if (res.data.access_token) {
var access_token = res.data.token_type + ' ' + res.data.access_token;
this.is_login = access_token
}
if (res.data.open_id) {
wx.reLaunch({
url: '/pages/user/agentlogin/agentlogin?agent_code=' + agent_code + '&open_id=' + res.data.open_id + '&url=' + getUrl() + '&is_tab=true'
})
}
}
wx.hideLoading();
}, err => {
wx.hideLoading();
})
} else {
wx.showToast({
title: '获取code失败',
icon: 'none'
})
}
}
})
}
// #endif
// #ifdef H5
if(agent_code && token == ''){
var env = {
isIPad: /ipad/i.test(window.navigator.userAgent),
isIphone: /iphone|ipad|ipod/i.test(window.navigator.userAgent),
isWechat: /MicroMessenger/i.test(window.navigator.userAgent)
}
if(env.isWechat){
if(e.openid){
this.$cookieStorage.set('openid',e.openid)
}
var openid = this.$cookieStorage.get('openid') || e.openid;
if(openid){
this.postNewQuickLogin(openid,agent_code);
} else{
let origin = window.location.origin;
var url = origin+'/pages/index/index/index?agent_code='+agent_code;
window.location.href = this.$config.GLOBAL.baseUrl+'oauth/wxOauth?redirect_url='+encodeURIComponent(url);
}
} else{
wx.navigateTo({
url:'/pages/user/loginType/loginType'
})
}
}
// #endif
} else {
this.setCode(e);
}
} else {
this.setCode(e);
}
})
},
setCode(e) {
const timeMap = {
y: 31536000000,
m: 2592000000,
d: 86400000,
h: 3600000,
n: 60000,
s: 1000
};
// 默认有效期为7天
var valid_time = "";
var clerk_id = e.clerk_id || "";
var shop_id = e.shop_id || "";
var agent_code = e.agent_code || '';
if (e.scene) {
var scene = decodeURIComponent(e.scene);
var sceneArr = scene.split(',');
if (sceneArr.length > 0) {
agent_code = sceneArr[0]
}
}
var cook_shop_id = this.$cookieStorage.get('shop_id');
if (!this.$cookieStorage.get('distribution_valid_time')) {
valid_time = 10080;
} else {
valid_time = this.$cookieStorage.get('distribution_valid_time');
}
let timeStamp = new Date().getTime();
timeStamp += timeMap.n * valid_time;
// 当url上shop_id与缓存中shop_id不一致时,需要清除clerk_id。以此保证shop_id与clerk_id对应
var cook_clerk_id = this.$cookieStorage.get('clerk_id');
if (cook_shop_id != shop_id && cook_clerk_id) {
this.$cookieStorage.clear('clerk_id');
}
if (agent_code) {
this.$cookieStorage.set('agent_code', agent_code, valid_time + 'n');
// 如果有agent_code就将这次进入的时间缓存
this.$cookieStorage.set('agent_code_time', timeStamp, valid_time + 'n');
// 如果有agent_code并且有coupon_agent_code就将coupon_agent_code清除,保证agent_code为第一位
if (this.$cookieStorage.get('coupon_agent_code')) {
this.$cookieStorage.clear('coupon_agent_code')
}
}
if (clerk_id) {
this.$cookieStorage.set('clerk_id', clerk_id, valid_time + 'n');
}
if (shop_id) {
this.$cookieStorage.set('shop_id', shop_id, valid_time + 'n');
// 如果有shop_id就将这次进入的时间缓存
this.$cookieStorage.set('shop_id_time', timeStamp, valid_time + 'n');
}
const code = agent_code || this.$cookieStorage.get('agent_code');
if (code) {
// this.getCodeUser(code);
}
},
postNewQuickLogin(open_id,agent_code){
wx.showLoading({
title: '正在登录',
mask: true
});
this.$http.post({
api:'api/oauth/newQuickLogin',
data:{
open_id:open_id,
agent_code:agent_code
}
}).then(res=>{
res = res.data;
if(res.status){
if(res.data.access_token){
var access_token = res.data.token_type + ' ' + res.data.access_token;
var expires_in = res.data.expires_in || 315360000;
this.$cookieStorage.set("user_token", access_token, expires_in);
//如果用户没有绑定手机号
if(res.data.has_bind_mobile == 0){
wx.reLaunch({
url:'/pages/user/bindingphone/bindingphone'
})
} else{
this.is_login = this.$cookieStorage.get('user_token');
}
} else{
wx.showModal({
content: res.message || '请求失败,请重试',
showCancel: false
});
}
} else{
wx.showModal({
content: res.message || '请求失败,请重试',
showCancel: false
});
}
wx.hideLoading()
}).catch(rej=>{
wx.showModal({
content: rej.message || '请求失败,请重试',
showCancel: false
});
wx.hideLoading()
})
},
// 根据agent_code获取用户信息
getCodeUser(agent_code) {
this.$http.get({
api: '/api/distribution/getAgentInfo',
data: {
agent_code: agent_code
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
const title = res.data.name + ' X ' + res.data.home_title || '';
wx.setNavigationBarTitle({
title: title
})
}
}
})
},
// 领取优惠券
getCoupon(e) {
var token = this.$cookieStorage.get('user_token');
console.log(e);
var code = e.code;
var index = e.index;
if (token) {
this.convertCoupon(code, index);
} else {
wx.showModal({
content: '请先登录',
showCancel: false,
success: res => {
if (res.confirm || !res.cancel && !res.confirm) {
pageLogin(getUrl());
}
}
});
}
},
// 领取优惠券接口
convertCoupon(code, index) {
var token = this.$cookieStorage.get('user_token');
wx.showLoading({
title: "正在领取",
mask: true
});
this.$http.post({
api: 'api/coupon/convert',
header: {
Authorization: token
},
data: {
coupon_code: code
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
if (res.status) {
var pages = this.microData.pages;
pages.forEach((val, idx) => {
if (val.name == 'micro_page_componet_coupon') {
/* this.setData({
[`microData.pages[${idx}].value[${index}].associate.has_get`]: true
}); */
}
});
wx.showToast({
title: '领取成功'
});
} else {
wx.showToast({
title: res.message || '领取失败',
icon: 'error'
});
}
wx.hideLoading();
} else {
wx.showToast({
title: '领取失败',
icon: 'error'
});
wx.hideLoading();
}
}).catch(rej => {
wx.showToast({
title: '领取失败',
icon: 'error'
});
wx.hideLoading();
});
},
jumpToDetail(e){
var id = e.currentTarget.dataset.id
wx.navigateTo({
url:`/pages/store/detail/detail?id=${id}`
})
},
// 获取用户信息
getUserInfo() {
this.$http.get({
api: 'api/me',
header: {
Authorization: this.$cookieStorage.get('user_token')
},
}).then(res => {
if (res.data.status) {
this.userInfo = res.data.data;
if (res.data.data.agent_code) {
// #ifdef MP-WEIXIN
wx.updateShareMenu();
// #endif
if(!res.data.data.gift_is_receive){
isBirthday().then(()=>{
if(this.$cookieStorage.get("birthday_gift")){
var giftData=this.$cookieStorage.get("birthday_gift").data;
this.giftData = giftData;
this.is_showBirth = true;
}
});
}
}
}
})
},
//跳到搜索页面
jumpSearch() {
console.log(3333);
wx.navigateTo({
url: '/pages/store/search/search'
});
},
jumpMenu(e) {
wx.switchTab({
url: '/pages/index/classification/classification'
});
},
jumpStore(e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/store/detail/detail?id=' + id
});
},
// 新人进店有礼
newPeopleGift(){
this.$http.get({
api:'api/home/gift_new_user'
}).then(res=>{
res=res.data;
if(res.status && res.data){
var cache_no_gift = this.$cookieStorage.get('new_gift');
res.data.gift.forEach(function(val){
val.coupon.usestart_at=val.coupon.usestart_at.replace(/\s.+$/, '')
val.coupon.useend_at=val.coupon.useend_at.replace(/\s.+$/, '');
});
this.setData({
noLoginGift:res.data
});
if(!cache_no_gift){
this.setData({
showNoGift:true
})
}
}
});
},
// 新人进店有礼(已登录)
getPeopleGift(){
this.$http.post({
api:'api/home/gift_new_user',
header:{
Authorization:this.$cookieStorage.get('user_token')
}
}).then(res=>{
res=res.data;
var cache_info = this.$cookieStorage.get('gift_info');
if(res.status && res.data && !cache_info){
// 判断是不是老用户
if(!res.data.activity.is_new_user){
if(this.is_newGiftLogin){
res.data.activity.gift.forEach(function(val){
val.coupon.usestart_at=val.coupon.usestart_at.replace(/\s.+$/, '');
val.coupon.useend_at=val.coupon.useend_at.replace(/\s.+$/, '');
});
this.setData({
showGift:true,
loginGift:res.data
});
}else{
this.closeGift();
}
}
else{
res.data.activity.gift.forEach(function(val){
val.coupon.usestart_at=val.coupon.usestart_at.replace(/\s.+$/, '');
val.coupon.useend_at=val.coupon.useend_at.replace(/\s.+$/, '');
});
this.setData({
showGift:true,
loginGift:res.data
})
}
}
else{
}
})
},
closeGift(){
this.$cookieStorage.set('gift_info',true);
this.setData({
showGift:false
})
},
setData: function (obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function (key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function (key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
},
onShareAppMessage(){
return {
title: '欢迎使用金诚优选小程序!',
path: '/pages/route/index?route=home'
}
}
};
</script>
<style lang="scss" scoped>
/*@import "index.less";*/
.lf-bg-search{
background-color: rgba(0,0,0,0.5) !important;
}
.lf-nav-capsule{
width: 120rpx;
height: 50rpx;
background-color: #186c6b;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
border-radius: 40rpx;
margin-right: 14rpx;
}
.lf-m-l-4{
margin-left: 4rpx;
}
.fuwu-tips{
width: 686rpx;
min-height: 70rpx;
background-color: #eff6f7;
margin: 60rpx auto 0;
display: flex;
// justify-content: space-between;
box-sizing: border-box;
align-items: center;
padding: 12rpx 30rpx;
border-radius: 40rpx;
line-height: 1.2;
.fuwu-tips-title{
font-size: 36rpx;
color: #186c6b;
margin-right: 15rpx;
font-weight: bold;
font-family: '华文行楷';
white-space: nowrap;
}
.fuwu-tips-desc1{
font-size: 28rpx;
color: #222222;
}
.fuwu-tips-desc2{
font-size: 22rpx;
color: #777777;
}
}
.lf-activity{
width: 686rpx;
height: 350rpx;
margin: 60rpx auto 0;
border-radius: 10rpx;
overflow: hidden;
&>image{
width: 100%;
height: 100%;
}
}
.lf-module-title{
font-size: 36rpx;
font-weight: bold;
text-align: center;
color: #222222;
margin-bottom: 30rpx;
margin-top: 60rpx;
}
.fixed-right{
position: fixed;
right: 32rpx;
bottom: 400rpx;
width: max-content;
height: max-content;
z-index: 9;
.fixed-cart{
width: 110rpx;
height: 110rpx;
border-radius: 50%;
background-color: #FFFFFF;
border: 1rpx solid #DEDEDE;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #333333;
position: relative;
margin-top: 30rpx;
.icon-text{
font-size: 50rpx;
line-height: 1;
}
.tips{
font-size: 20rpx;
color: #333333;
}
.angle-mark{
position: absolute;
right: 4rpx;
top: 4rpx;
width: 40rpx;
height: 40rpx;
background-color: #15716E;
border-radius: 50%;
font-size: 20rpx;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
}
}
.fixed-live{
background: #15716E;
border-radius: 100rpx 5rpx 100rpx 100rpx;
border: none;
color: #FFFFFF;
// animation: bounceIn 1s .2s ease both;
backface-visibility:visible;
transform-origin:center center;
animation: demo 2s 0s infinite ease normal none ;
// &>text:nth-child(1){
// animation: fadeInRightBig 1s .1s ease both;
// }
.tips{
color: #FFFFFF;
}
}
}
@keyframes bounceIn{
0%{opacity:0; transform:scale(.3)}
50%{opacity:1; transform:scale(1.05)}
70%{transform:scale(.9)}
100%{transform:scale(1)}
}
@keyframes fadeInRightBig{
0%{opacity:0; transform:translateX(2000px)}
100%{opacity:1; transform:translateX(0)}
}
@keyframes demo{
0%{ opacity:0; transform:translateX(.3px) scaleX(.3);
} 13%{ transform:translateX(1.05px) scaleX(1.05);
} 29%{ transform:translateX(0.9px) scaleX(.9);
} 41%{ transform:translateX(1px) scaleX(1);
} 100%{ opacity:1; transform:translateX(1px) scaleX(1);
} 67%{
opacity:1;
}
}
/deep/.u-back-top{
width: 110rpx !important;
height: 110rpx !important;
background-color: rgba(0,0,0,0.5) !important;
right: 32rpx !important;
color: #FFFFFF !important;
margin-bottom: 60rpx;
}
</style>