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.
869 lines
24 KiB
869 lines
24 KiB
<template>
|
|
<view>
|
|
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="false" />
|
|
<view class="header" :style="'margin-top:-'+margin_top+'px'">
|
|
<image class='background' src="/static/img/user/topbg.png" mode="aspectFill"></image>
|
|
<view class="userInfo">
|
|
<view class="uleft">
|
|
<u-image :src="info.avatar" width="48px" height="48px" radius="50%" @error="imgErr"></u-image>
|
|
</view>
|
|
<view class="ucenter">
|
|
<view class="name"><text class="username">{{info.nick_name}}</text><!-- <text class="level">等级</text> --></view>
|
|
</view>
|
|
<view class="uright">
|
|
<view class="change" @click="goTo('/pages/user/account/index')">
|
|
<image src="/static/img/user/setting.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="boxBg">
|
|
<image class='box_bg' src="/static/img/user/boxbg.png" mode="aspectFill"></image>
|
|
<view class="mbBox">
|
|
<view class="mleft">
|
|
<view class="mb_title">面部档案</view>
|
|
<view class="mb_desc">分享可解锁新面部档案</view>
|
|
</view>
|
|
<view class="mright">
|
|
<view class="mbItem" v-for="(item,index) in portraitList" :key="index">
|
|
<image v-if="item.can == true" :src="item.image" mode="widthFix" @click="goTo('/pages/user/portrait/detail?id='+item.id)"></image>
|
|
<image v-if="item.can == false" :src="item.image" mode="widthFix" @click="showShare"></image>
|
|
</view>
|
|
<!-- <view class="mbItem">
|
|
<image src="/static/img/user/have_no.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="mbItem">
|
|
<image src="/static/img/user/have_no.png" mode="widthFix"></image>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
<view class="tabList">
|
|
<u-tabs :list="tabList"
|
|
lineWidth="30"
|
|
lineColor="#9B75FF"
|
|
:current="current"
|
|
:activeStyle="{
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)',
|
|
fontSize:'28rpx',
|
|
}"
|
|
:inactiveStyle="{
|
|
color: '#000000',
|
|
transform: 'scale(1)',
|
|
fontSize:'28rpx',
|
|
}"
|
|
itemStyle="padding: 20rpx 15rpx 0rpx 15rpx; width:157rpx; height: 88rpx;"
|
|
@click="tabChange"></u-tabs>
|
|
|
|
<view class="datalist">
|
|
|
|
<!-- <view class="picBox" @click="goTo('/pages/user/photo/detail')">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
|
|
<image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">港风复古</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<view class="ing">生成中...</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="picBox">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">港风复古</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
|
|
<!-- <view class="imgBox">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
|
|
<image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">一寸照</view>
|
|
<view class="p_desc">25×35mm | 295×413px</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<view class="ing">生成中...</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="imgBox">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">一寸照</view>
|
|
<view class="p_desc">25×35mm | 295×413px</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="imgBox" v-if="tabList[current].type == 1" v-for="(item,index) in dataList" :key="index" @click="viewDetail(item)">
|
|
<view class="p_left">
|
|
<image class="p_bg" :src="item.merge_thumbnail" mode="aspectFill"></image>
|
|
<image v-if="item.status != 3" class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">{{item.specs.title}}</view>
|
|
<view class="p_desc" v-if="item.specs.w_h_mm.w == 0 && item.specs.w_h_px.w == 0">{{item.custom_kb.min}}-{{item.custom_kb.max}}kb | {{item.custom_w_h_px.w}}×{{item.custom_w_h_px.h}}px</view>
|
|
<view class="p_desc" v-else>{{item.specs.w_h_mm.w}}×{{item.specs.w_h_mm.h}}mm | {{item.specs.w_h_px.w}}×{{item.specs.w_h_px.h}}px</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix" v-if="item.status == 3"></image>
|
|
<view class="ing" v-if="item.status == 1">排队中...</view>
|
|
<view class="ing" v-if="item.status == 2">生成中...</view>
|
|
<view class="ing" v-if="item.status == 2">生成失败</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="picBox" v-if="tabList[current].type == 2" v-for="(item,index) in dataList" :key="index" @click="viewDetail(item)">
|
|
<view class="p_left">
|
|
<image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
|
|
<image v-if="item.status != 3" class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">{{item.create_time}}</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix" v-if="item.status == 3"></image>
|
|
<view class="ing" v-if="item.status == 1">排队中...</view>
|
|
<view class="ing" v-if="item.status == 2">生成中...</view>
|
|
<view class="ing" v-if="item.status == 2">生成失败</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="picBox" v-if="tabList[current].type == 3" v-for="(item,index) in dataList" :key="index" @click="viewDetail(item)">
|
|
<view class="p_left">
|
|
<image class="p_bg" :src="item.album.face" mode="aspectFill"></image>
|
|
<image v-if="item.status != 3" class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">{{item.album.title}}</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix" v-if="item.status == 3"></image>
|
|
<view class="ing" v-if="item.status == 1">排队中...</view>
|
|
<view class="ing" v-if="item.status == 2">生成中...</view>
|
|
<view class="ing" v-if="item.status == 2">生成失败</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="picBox" v-if="tabList[current].type == 4" v-for="(item,index) in dataList" :key="index" @click="viewDetail(item)">
|
|
<view class="p_left">
|
|
<image class="p_bg" :src="item.cartoon.face" mode="aspectFill"></image>
|
|
<image v-if="item.status != 3" class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="p_center">
|
|
<view class="p_title">{{item.cartoon.title}}</view>
|
|
</view>
|
|
<view class="p_right">
|
|
<view class="distance">
|
|
<image src="/static/img/index/right.png" mode="widthFix" v-if="item.status == 3"></image>
|
|
<view class="ing" v-if="item.status == 1">排队中...</view>
|
|
<view class="ing" v-if="item.status == 2">生成中...</view>
|
|
<view class="ing" v-if="item.status == 2">生成失败</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
<u-empty icon="/static/img/user/nodata.png" mode="list" text="暂无数据，快去添加吧！" width="180rpx" marginTop="120px" v-if="dataList.length == 0"></u-empty>
|
|
<view class="newBtn" @click="createNew" v-if="dataList.length == 0">去创建</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="nowENV" v-if="this.$api.env() == 'development' || this.$api.env() == 'local'">
|
|
<u-tag v-if="this.$api.env() == 'development'" text="线上测试环境" type="warning" plain plainFill></u-tag>
|
|
<u-tag v-if="this.$api.env() == 'local'" text="本地开发环境" type="error" plain plainFill></u-tag>
|
|
</view>
|
|
|
|
<view class="empty">
|
|
</view>
|
|
|
|
|
|
<u-popup :show="tips_show" :round="10" mode="center" bgColor="transparent" @close="close('tips_show')" @open="open('tips_show')">
|
|
<view class="popupBox">
|
|
<view class="popupTop">
|
|
提醒
|
|
</view>
|
|
<view class="popupDesc1">
|
|
<u-parse :content="content" :tagStyle="style"></u-parse>
|
|
|
|
</view>
|
|
<view class="popupBtn">
|
|
<view class="sbtnBox1 a1" @click="close('tips_show')">取消</view>
|
|
<button class="sbtnBox1 a2" open-type="share" @click="submit('tips_show')">去分享</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import custom_navbar from "../index/components/header.vue";
|
|
|
|
export default {
|
|
components: {
|
|
custom_navbar
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
navbar_title: '',
|
|
theme: "blue",
|
|
margin_top: 0,
|
|
|
|
|
|
isLogin:false, //登录
|
|
info:{
|
|
avatar:'/static/img/user/avatar.png',
|
|
nick_name:'点击登录',
|
|
},
|
|
sceneList:[], //场景
|
|
tabList: [
|
|
/* {
|
|
type:1,
|
|
name: '证件照合成',
|
|
}, {
|
|
type:2,
|
|
name: '证件照换色',
|
|
}, {
|
|
type:3,
|
|
name: 'AI写真'
|
|
}, {
|
|
type:4,
|
|
name: '卡通风格'
|
|
} */
|
|
],
|
|
current:0,
|
|
//档案
|
|
portraitList:[],
|
|
|
|
//分页
|
|
page: 1,
|
|
dataList:[],
|
|
|
|
//弹窗
|
|
tips_show: false,
|
|
content: `<p>分享给好友，好友注册登录成功即可解 </p>
|
|
<p>锁新的面部档案，可生成他人的写真集</p>`,
|
|
style: {
|
|
// 字符串的形式
|
|
|
|
p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
|
|
|
|
},
|
|
};
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop > 50) {
|
|
this.theme = 'white';
|
|
this.navbar_title='个人中心';
|
|
} else {
|
|
|
|
this.theme = 'blue';
|
|
this.navbar_title='';
|
|
}
|
|
},
|
|
onReady: function (res) {
|
|
var _this = this;
|
|
//console.log('/pages/user/photo/merge?url='+encodeURIComponent('https://resourcedev.aicverse.com/ai_tour/spot_template/2.jpg'));
|
|
},
|
|
onShow() {
|
|
var _this =this;
|
|
_this.getUserInfo();
|
|
//场景信息
|
|
_this.getSceneMenu();
|
|
//面部档案
|
|
_this.getPortraitList();
|
|
setTimeout(function(res){
|
|
_this.tabChange({index:0});
|
|
},1000);
|
|
|
|
|
|
},
|
|
onReachBottom () {
|
|
|
|
this.page++;
|
|
this.loadDataList();
|
|
|
|
},
|
|
onShareAppMessage() {
|
|
var _this = this;
|
|
var userInfo = _this.$user.session('userInfo');
|
|
var str = !_this.$com.isNull(userInfo.invite_code) ? '?invite_code='+userInfo.invite_code :'';
|
|
return {
|
|
title: '智能拍照合成',
|
|
content:'证件照合成,换色,AI写真,卡通画风',
|
|
imageUrl:'',
|
|
path: '/pages/index/index'+str,
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
var _this = this;
|
|
var userInfo = _this.$user.session('userInfo');
|
|
var str = !_this.$com.isNull(userInfo.invite_code) ? '?invite_code='+userInfo.invite_code :'';
|
|
return {
|
|
title: '智能拍照合成',
|
|
content:'证件照合成,换色,AI写真,卡通画风',
|
|
imageUrl:'',
|
|
path: '/pages/index/index'+str,
|
|
}
|
|
},
|
|
methods:{
|
|
getNavHeight(e) {
|
|
this.margin_top += e;
|
|
},
|
|
//头像加载失败
|
|
imgErr(){
|
|
this.info.avatar = '/static/img/user/avatar.png';
|
|
},
|
|
//获取用户信息
|
|
getUserInfo()
|
|
{
|
|
var _this =this;
|
|
var post ={};
|
|
_this.$api.get('api/userInfo',post,function(rs){
|
|
//console.log('用户信息',rs);
|
|
var oldToken = _this.$user.session('token');
|
|
//先缓存
|
|
_this.$user.session('userInfo',rs);
|
|
if(!_this.$com.isNull(rs.token) && oldToken != rs.token)
|
|
{
|
|
_this.$user.session('token',rs.token);
|
|
}
|
|
//显示
|
|
var userInfo = rs;
|
|
if(_this.$com.isNull(userInfo.nick_name) )
|
|
{
|
|
userInfo.nick_name = '微信用户';
|
|
}
|
|
if(_this.$com.isNull(userInfo.avatar))
|
|
{
|
|
|
|
userInfo.avatar = '/static/img/user/avatar.png';
|
|
}
|
|
else
|
|
{
|
|
userInfo.avatar = _this.$api.ossurl(userInfo.avatar);
|
|
}
|
|
_this.info = userInfo;
|
|
},function(err){
|
|
console.log(err);
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
goTo(url)
|
|
{
|
|
uni.$u.route({
|
|
type:'navigateTo',
|
|
url: url,
|
|
});
|
|
},
|
|
//选项卡选择
|
|
tabChange(e)
|
|
{
|
|
var _this =this;
|
|
console.log(e);
|
|
_this.current = e.index;
|
|
var type = _this.tabList[_this.current].type;
|
|
_this.dataList = [];
|
|
_this.page = 1;
|
|
switch(type)
|
|
{
|
|
case 1:
|
|
_this.loadDataList('api/photo_synthesis/list');
|
|
break;
|
|
case 2:
|
|
_this.loadDataList('api/photo_back_color/list');
|
|
break;
|
|
case 3:
|
|
_this.loadDataList('api/photo_album/list');
|
|
break;
|
|
case 4:
|
|
_this.loadDataList('api/photo_cartoon/list');
|
|
break;
|
|
}
|
|
},
|
|
loadDataList(url)
|
|
{
|
|
var _this = this;
|
|
var type = _this.tabList[_this.current].type;
|
|
var post = {page:_this.page,limit:10};
|
|
_this.$api.get(url, post, function(res) {
|
|
//console.log(res);
|
|
var d = res;
|
|
var Data = d.data;
|
|
Data.forEach((item, index) => {
|
|
switch(type)
|
|
{
|
|
case 1:
|
|
if(!_this.$com.isNull(item.merge_thumbnail))
|
|
{
|
|
Data[index].merge_thumbnail = _this.$api.ossurl(item.merge_thumbnail);
|
|
}
|
|
else
|
|
{
|
|
Data[index].merge_thumbnail = '/static/img/index/zj_icon.png';
|
|
}
|
|
|
|
break;
|
|
case 2:
|
|
if(!_this.$com.isNull(item.merge_thumbnail))
|
|
{
|
|
Data[index].merge_thumbnail = _this.$api.ossurl(item.merge_thumbnail);
|
|
}
|
|
else
|
|
{
|
|
Data[index].merge_thumbnail = '/static/img/user/pic_bg.png';
|
|
}
|
|
|
|
break;
|
|
case 3:
|
|
Data[index].album.face = _this.$api.ossurl(item.album.face);
|
|
break;
|
|
case 4:
|
|
Data[index].cartoon.face = _this.$api.ossurl(item.cartoon.face);
|
|
break;
|
|
}
|
|
|
|
});
|
|
_this.dataList = _this.dataList.concat(Data);
|
|
|
|
});
|
|
},
|
|
//合照场景
|
|
getSceneMenu(){
|
|
var _this =this;
|
|
_this.$api.get('api/photo/scene_list', {},function(res){
|
|
console.log('场景',res);
|
|
var sceneList = res;
|
|
sceneList.forEach((item, index) => {
|
|
sceneList[index].name = item.title;
|
|
});
|
|
_this.tabList = sceneList;
|
|
|
|
});
|
|
},
|
|
//档案
|
|
getPortraitList(){
|
|
var _this =this;
|
|
var config = _this.$user.session('app_config');
|
|
var all = config.photo.photo_model_number; //系统总数
|
|
var user = _this.$user.session('userInfo');
|
|
var can_num = user.attach.user_face.available_number; //可使用数量
|
|
var use_num = user.attach.user_face.used_already_number;//已使用数量
|
|
var baseList = [];
|
|
for (var i=1; i<= all; i++)
|
|
{
|
|
//console.log(i,can_num);
|
|
if(i <= can_num)
|
|
{
|
|
baseList.push({id:0,image:'/static/img/user/have.png',can:true});
|
|
}
|
|
else
|
|
{
|
|
baseList.push({id:0,image:'/static/img/user/have_no.png',can:false});
|
|
}
|
|
}
|
|
var post ={};
|
|
_this.$api.get('api/portrait/list',post,function(rs){
|
|
console.log('档案信息',rs);
|
|
if(rs.length > 0)
|
|
{
|
|
rs.forEach((item, index) => {
|
|
baseList[index].id = item.id;
|
|
if(!_this.$com.isNull(item.model_image_thumbnail))
|
|
{
|
|
baseList[index].image = _this.$api.ossurl(item.model_image_thumbnail);
|
|
}
|
|
|
|
})
|
|
}
|
|
_this.portraitList = baseList;
|
|
});
|
|
|
|
},
|
|
createNew(){
|
|
var _this =this;
|
|
var type = _this.tabList[_this.current].type;
|
|
switch(type)
|
|
{
|
|
case 1:
|
|
uni.navigateTo({
|
|
url:'/pagesA/merge/index',
|
|
})
|
|
break;
|
|
case 2:
|
|
uni.navigateTo({
|
|
url:'/pagesA/color/index',
|
|
})
|
|
break;
|
|
case 3:
|
|
uni.navigateTo({
|
|
url:'/pagesA/photo/photo_1',
|
|
})
|
|
break;
|
|
case 4:
|
|
uni.navigateTo({
|
|
url:'/pagesA/photo/cartoon_1',
|
|
})
|
|
break;
|
|
}
|
|
|
|
},
|
|
viewDetail(item){
|
|
var _this =this;
|
|
var type = _this.tabList[_this.current].type;
|
|
if(item.status != 3)
|
|
{
|
|
_this.$com.showError('照片生成中,请等待');
|
|
return;
|
|
}
|
|
switch(type)
|
|
{
|
|
case 1:
|
|
uni.navigateTo({
|
|
url:'/pages/user/photo/merge?url='+encodeURIComponent(_this.$api.ossurl(item.merge_image)),
|
|
})
|
|
break;
|
|
case 2:
|
|
uni.navigateTo({
|
|
url:'/pages/user/photo/color?url='+encodeURIComponent(_this.$api.ossurl(item.merge_image)),
|
|
})
|
|
break;
|
|
case 3:
|
|
uni.navigateTo({
|
|
url:'/pages/user/photo/ai?id='+item.id,
|
|
})
|
|
break;
|
|
case 4:
|
|
uni.navigateTo({
|
|
url:'/pages/user/photo/cartoon?id='+item.id,
|
|
})
|
|
break;
|
|
}
|
|
},
|
|
//显示分享弹窗1
|
|
showShare(){
|
|
this.tips_show = true;
|
|
},
|
|
open(key) {
|
|
console.log('open',key);
|
|
},
|
|
close(key) {
|
|
var _this = this;
|
|
_this[key] = false;
|
|
|
|
},
|
|
submit(key){
|
|
var _this =this;
|
|
_this.close(key);
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{ height:100%; width: 100%;}
|
|
.container{padding:10rpx 20rpx;}
|
|
.header{ width: 100%; height: 580rpx; overflow: hidden; position: relative;}
|
|
.background {
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
z-index: -1;
|
|
}
|
|
.userInfo{ width: 670rpx; height: auto; display: flex; margin: 244rpx auto 50rpx auto;}
|
|
.userInfo .uleft{ width: 100rpx; height: 120rpx;}
|
|
.userInfo .uleft .u-image{margin-top: 20rpx;}
|
|
.userInfo .ucenter{ width: 450rpx; height: 120rpx; line-height: 120rpx;}
|
|
.userInfo .ucenter .name{ width: 100%; height: 120rpx;}
|
|
.userInfo .ucenter .name .username{font-size: 32rpx; color:#333333; font-weight: 700; margin-left:20rpx;}
|
|
.userInfo .ucenter .name .level{width: auto; padding: 2rpx 10rpx;
|
|
height: 44rpx;
|
|
background: #095E59; text-align: center; font-size: 24rpx;color: #333333;
|
|
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
|
border: 1rpx solid #00F0E2; margin-left: 20rpx;}
|
|
.userInfo .uright{ width: 120rpx; height: 120rpx;}
|
|
.userInfo .uright .change{width: 104rpx;
|
|
height: 50rpx;
|
|
color: #333333; font-size: 28rpx; line-height: 50rpx; text-align: center;}
|
|
.userInfo .uright .change image{ width: 42rpx; height: 42rpx; margin-top: 40rpx;}
|
|
|
|
.boxBg{
|
|
width: 702rpx;
|
|
height: 160rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
position: relative;
|
|
margin: 0rpx auto 20rpx auto;
|
|
}
|
|
.box_bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
z-index: -1;
|
|
}
|
|
.mbBox{width: 100%; height: 160rpx; display: flex;}
|
|
.mleft{width: 50%;}
|
|
.mleft .mb_title{
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 90rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
.mleft .mb_desc{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #555555;
|
|
line-height: 40rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
.mright{width: 50%; height: 160rpx; display: flex;}
|
|
.mbItem{ width: 80rpx; height: 80rpx; margin: 40rpx auto; overflow: hidden; border-radius: 50%;}
|
|
.mbItem image{width: 80rpx; height: 80rpx; }
|
|
|
|
.nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;}
|
|
.empty{width: 100%; height: 20rpx;}
|
|
|
|
.newBtn{
|
|
width: 400rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 48rpx;
|
|
border: 2rpx solid #9B75FF;
|
|
text-align: center;
|
|
margin: 20rpx auto;
|
|
color: #9B75FF;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
.tabList{
|
|
width: 100%; height: auto;
|
|
}
|
|
|
|
.datalist{ width: 100%; height: auto;}
|
|
.picBox{
|
|
width: 702rpx;
|
|
height: 160rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
margin: 20rpx auto;
|
|
display: flex;
|
|
}
|
|
.picBox .p_left{ width: 112rpx; height: 112rpx; margin: 24rpx 24rpx; position: relative;}
|
|
.picBox .p_left .p_bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
border-radius:20rpx;
|
|
}
|
|
.picBox .p_left .p_pic{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
z-index: 2;
|
|
opacity: 0.8;
|
|
border-radius:20rpx;
|
|
}
|
|
.picBox .p_center{ width: 342rpx; height: 160rpx; line-height: 160rpx; }
|
|
.picBox .p_center .p_title{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.picBox .p_right{width: 200rpx;height: 160rpx;}
|
|
.picBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;}
|
|
.picBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;}
|
|
.picBox .p_right .distance .ing{
|
|
height: auto;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF4F34;
|
|
line-height: 34rpx;
|
|
margin: 65rpx 24rpx auto auto;
|
|
}
|
|
|
|
|
|
.imgBox{
|
|
width: 702rpx;
|
|
height: 160rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
margin: 20rpx auto;
|
|
display: flex;
|
|
}
|
|
.imgBox .p_left{ width: 72rpx; height: 72rpx; margin: 44rpx 24rpx 44rpx 24rpx; position: relative;}
|
|
.imgBox .p_left .p_bg{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
background-size:100% 100%;
|
|
border-radius:20rpx;
|
|
}
|
|
.imgBox .p_left .p_pic{
|
|
width: 100%;
|
|
height: 100%;
|
|
position:absolute;
|
|
z-index: 2;
|
|
opacity: 0.8;
|
|
border-radius:20rpx;
|
|
}
|
|
.imgBox .p_center{ width: 362rpx; height: 160rpx; }
|
|
.imgBox .p_center .p_title{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 80rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.imgBox .p_center .p_desc{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
line-height: 40rpx;
|
|
}
|
|
.imgBox .p_right{width: 200rpx;height: 160rpx;}
|
|
.imgBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;}
|
|
.imgBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;}
|
|
.imgBox .p_right .distance .ing{
|
|
height: auto;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF4F34;
|
|
line-height: 34rpx;
|
|
margin: 65rpx 24rpx auto auto;
|
|
}
|
|
|
|
|
|
|
|
.popupBox{
|
|
width: 600rpx;
|
|
height: auto;
|
|
border-radius: 24rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.popupTop{
|
|
width: 600rpx;
|
|
height: 140rpx;
|
|
background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
line-height: 140rpx;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.popupBtn{ width: 100%; height: auto;
|
|
display: flex; flex-wrap: wrap;
|
|
justify-content: space-around; /* 使子元素在容器中均匀分布 */
|
|
align-items: center; /* 如果需要垂直居中子元素 */
|
|
}
|
|
|
|
.sbtnBox1{
|
|
margin: 30rpx auto;
|
|
width: 226rpx;
|
|
height: 80rpx;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
border: 2rpx solid #4D94FF;
|
|
text-align: center;
|
|
border-radius: 44rpx;
|
|
|
|
}
|
|
|
|
.popupDesc{
|
|
width:560rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
height: auto;
|
|
padding: 0rpx 20rpx;
|
|
}
|
|
|
|
.popupDesc1{
|
|
width:480rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
height: auto;
|
|
padding: 0rpx 60rpx;
|
|
}
|
|
|
|
|
|
.a1{
|
|
background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
|
|
color:#7A74F0;
|
|
}
|
|
.a2{
|
|
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
|
|
color:#FFFFFF;
|
|
}
|
|
.a3{
|
|
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
|
|
color:#FFFFFF;
|
|
}
|
|
|
|
|
|
</style>
|
|
|