fe / ufo-app-web · Commits

Go to a project

Authored by 张文文
Commit 68e7644b660d1636cb75bdca5459690973f28660 1 parent d65d7f94

bug fix

Inline Side-by-side
Showing 5 changed files with 478 additions and 370 deletions
... ... @@ -34,19 +34,18 @@ if (isYohoBuy && !$appLink) {
const yoho = {
/**
* 判断是否是 APP
*/
* 判断是否是 APP
*/
isApp: /YohoBuy/i.test(navigator.userAgent || '') || /YohoBuy/i.test(navigator.userAgent || ''),
isiOS: /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(navigator.userAgent || ''),
isAndroid: /Android/i.test(navigator.userAgent || ''),
isYohoBuy: isYohoBuy,
/**
* JS 与 APP 共享的对象
*/
* JS 与 APP 共享的对象
*/
data: window.yohoInterfaceData,
ready(callback) {
if (this.isApp || this.isYohoBuy) {
document.addEventListener('deviceready', callback);
... ... @@ -56,11 +55,11 @@ const yoho = {
},
/**
* 跳转至指定index的tab(从0开始)
* @param args 传递给 APP 的参数 {"index":tab_index}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
* 跳转至指定index的tab(从0开始)
* @param args 传递给 APP 的参数 {"index":tab_index}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
goTab(args, success, fail) {
if (this.isApp && window.yohoInterface) {
args.showScrollbar = 'no';
... ... @@ -75,11 +74,11 @@ const yoho = {
},
/**
* 跳转至登录页面
* @param args 传递给 APP 的参数 {""}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
* 跳转至登录页面
* @param args 传递给 APP 的参数 {""}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
goLogin(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -93,11 +92,11 @@ const yoho = {
},
/**
* 获取app版本号
* @param args {""}
* @param success
* @param fail
*/
* 获取app版本号
* @param args {""}
* @param success
* @param fail
*/
getAppVersion(args, success, fail) {
if (window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -111,11 +110,11 @@ const yoho = {
},
/**
* 退出登录，清除本地用户数据
* @param args {""}
* @param success
* @param fail
*/
* 退出登录，清除本地用户数据
* @param args {""}
* @param success
* @param fail
*/
goLogout(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -129,11 +128,11 @@ const yoho = {
},
/**
* 设置shoppingkey
* @param args 传递给 APP 的参数 {"shoppingkey":""}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
* 设置shoppingkey
* @param args 传递给 APP 的参数 {"shoppingkey":""}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
goShopingKey(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -147,11 +146,11 @@ const yoho = {
},
/**
* 跳转至购物车页面
* @param args 传递给 APP 的参数 {""}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
* 跳转至购物车页面
* @param args 传递给 APP 的参数 {""}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
goShopingCart(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -165,11 +164,11 @@ const yoho = {
},
/**
* 跳转地址页面 1:地址选择页面 2:地址管理页面
* @param args 传递给 APP 的参数 {"type":"1"}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
* 跳转地址页面 1:地址选择页面 2:地址管理页面
* @param args 传递给 APP 的参数 {"type":"1"}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
goAddress(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -183,11 +182,11 @@ const yoho = {
},
/**
* 跳转至图片浏览页面;images:浏览图片的url index:点击的图片序号
* @param args 传递给 APP 的参数 {"images":[imgUrl1,imgUrl2...],"index":"1"}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
* 跳转至图片浏览页面;images:浏览图片的url index:点击的图片序号
* @param args 传递给 APP 的参数 {"images":[imgUrl1,imgUrl2...],"index":"1"}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
goImageBrowser(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -201,11 +200,11 @@ const yoho = {
},
/**
* 跳转至新页面（页面内容为html）
* @param args 传递给 APP 的参数 {"url":""}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
* 跳转至新页面（页面内容为html）
* @param args 传递给 APP 的参数 {"url":""}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
goNewPage(args) {
if (this.isYohoBuy) {
... ... @@ -229,7 +228,9 @@ const yoho = {
});
}
if (window.parent && window.parent !== window) {
window.parent.blkDocument.goNewPage({url});
window.parent.blkDocument.goNewPage({
url
});
} else {
$appLink.href = url;
$appLink.click();
... ... @@ -245,11 +246,11 @@ const yoho = {
},
/**
* 跳转至支付页面
* @param args 传递给 APP 的参数 {"orderid":"098768"}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
* 跳转至支付页面
* @param args 传递给 APP 的参数 {"orderid":"098768"}
* @param success 调用成功的回调方法
* @param fail 调用失败的回调方法
*/
goPay(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -263,11 +264,11 @@ const yoho = {
},
/**
* 返回上一级页面
* @param args {""}
* @param success
* @param fail
*/
* 返回上一级页面
* @param args {""}
* @param success
* @param fail
*/
goBack(args, success, fail) {
if ((this.isApp || this.isYohoBuy) && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -280,11 +281,11 @@ const yoho = {
},
/**
* 新的返回上一级页面
* @param args {""}
* @param success
* @param fail
*/
* 新的返回上一级页面
* @param args {""}
* @param success
* @param fail
*/
goNewBack(args, success, fail) {
if (this.isYohoBuy && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -297,11 +298,11 @@ const yoho = {
},
/**
* 联系电话
* @param args {""}
* @param success
* @param fail
*/
* 联系电话
* @param args {""}
* @param success
* @param fail
*/
goTel(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -315,11 +316,11 @@ const yoho = {
},
/**
* 获取频道
* @param args {""}
* @param success
* @param fail
*/
* 获取频道
* @param args {""}
* @param success
* @param fail
*/
getChannel(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -333,11 +334,11 @@ const yoho = {
},
/**
* 设置频道
* @param args {""}
* @param success
* @param fail
*/
* 设置频道
* @param args {""}
* @param success
* @param fail
*/
setChannel(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -351,11 +352,11 @@ const yoho = {
},
/**
* 频道跳转
* @param args {""}
* @param success
* @param fail
*/
* 频道跳转
* @param args {""}
* @param success
* @param fail
*/
goChannel(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -369,11 +370,11 @@ const yoho = {
},
/**
* 分享
* @param args {"title":"标题","des":"描述","img":"icon地址","url":"网页地址"}
* @param success
* @param fail
*/
* 分享
* @param args {"title":"标题","des":"描述","img":"icon地址","url":"网页地址"}
* @param success
* @param fail
*/
goShare(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -387,11 +388,11 @@ const yoho = {
},
/**
* 跳转到搜索页面
* @param args {""}
* @param success
* @param fail
*/
* 跳转到搜索页面
* @param args {""}
* @param success
* @param fail
*/
goSearch(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -405,11 +406,11 @@ const yoho = {
},
/**
* 跳转到设置页面
* @param args {""}
* @param success
* @param fail
*/
* 跳转到设置页面
* @param args {""}
* @param success
* @param fail
*/
goSetting(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -423,11 +424,11 @@ const yoho = {
},
/**
* 跳转到设置头像
* @param args {""}
* @param success
* @param fail
*/
* 跳转到设置头像
* @param args {""}
* @param success
* @param fail
*/
goSetAvatar(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -441,11 +442,11 @@ const yoho = {
},
/**
* 跳转到收藏管理
* @param args {""}
* @param success
* @param fail
*/
* 跳转到收藏管理
* @param args {""}
* @param success
* @param fail
*/
goPageView(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -459,11 +460,11 @@ const yoho = {
},
/**
* 更新头部信息
* @param args {""}
* @param success
* @param fail
*/
* 更新头部信息
* @param args {""}
* @param success
* @param fail
*/
updateNavigationBar(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -477,11 +478,11 @@ const yoho = {
},
/**
* 显示 loading
* @param args Boolen
* @param success
* @param fail
*/
* 显示 loading
* @param args Boolen
* @param success
* @param fail
*/
showLoading(args, success, fail) {
if (this.isApp && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -497,11 +498,11 @@ const yoho = {
},
/**
* 显示返回滑块
* @param args Boolean
* @param success
* @param fail
*/
* 显示返回滑块
* @param args Boolean
* @param success
* @param fail
*/
blkBackStatus(args, success, fail) {
if (this.isYohoBuy && window.yohoInterface) {
window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
... ... @@ -517,13 +518,13 @@ const yoho = {
},
/**
* 原生调用 JS 方法
* @param name 方法名
* @param callback 回调
*/
* 原生调用 JS 方法
* @param name 方法名
* @param callback 回调
*/
addNativeMethod(name, callback) {
// 延迟 500ms 注入
setTimeout(function() {
setTimeout(function () {
if (window.yohoInterface) {
window.yohoInterface[name] = callback;
}
... ... @@ -548,7 +549,7 @@ const yoho = {
}
},
goPage: function(action, params) {
goPage: function (action, params) {
var url = window.location.protocol + '//m.yohobuy.com/';
if (this.isYohoBuy && window.yohoInterface) {
... ... @@ -609,6 +610,69 @@ const yoho = {
}
},
// 个人中心跳转
goUserCenter({
authorUid,
authorType
}) {
var url = window.location.protocol + '//m.yohobuy.com';
if (this.isYohoBuy && window.yohoInterface) {
url =
url +
'?openby:yohobuy=' +
JSON.stringify({
action: 'go.h5',
params: {
param: {
headerid: '-1',
toplayoutByH5: 'Y',
},
url: `${url}/grass/author/${authorType}/${authorUid}`,
},
});
if ($appLink) {
$appLink.href = url;
$appLink.click();
}
} else {
url = `${url}/grass/author/${authorType}/${authorUid}`;
console.log(url);
window.open(url);
}
},
// 跳UFO商品详情页
goToUfoProductDetail({
skn,
name,
articleId = 0
}) {
var url = window.location.protocol + '//2.yohobuy.com';
if (this.isYohoBuy && window.yohoInterface) {
url = url + '?openby:yohobuy=' + JSON.stringify({
action: 'go.ufo',
params: {
pagename: 'productDetail',
productId: skn,
from_page_name: name,
from_page_param: articleId
}
});
if ($appLink) {
$appLink.href = url;
$appLink.click();
}
} else {
url = url + '/html/h5Share/goodsDetail.html?id=' + skn;
window.open(url);
}
},
// 跳UFO商品详情页
goUfoProductDetail(skn) {
var url = window.location.protocol + '//m.yohobuy.com/';
... ... @@ -634,5 +698,4 @@ const yoho = {
},
};
export default yoho;
... ...
<template>
<img v-lazy="currentSrc" :alt="alt" v-if="currentLazy" class="lazy-img" @error="onError">
<img :src="currentSrc" :alt="alt" v-else lazy="" data-src="" @error="onError">
<img
v-lazy="currentSrc"
:alt="alt"
v-if="currentLazy"
class="lazy-img"
@error="onError"
@click="onUserClick"
/>
<img :src="currentSrc" :alt="alt" v-else lazy data-src @error="onError" @click="onUserClick" />
</template>
<script>
import {mapState} from 'vuex';
import {processImage} from 'utils/image-handler';
import { mapState } from "vuex";
import { processImage } from "utils/image-handler";
export default {
name: 'ImageFormat',
name: "ImageFormat",
props: {
lazy: {
type: Boolean,
... ... @@ -39,14 +46,17 @@ export default {
}
},
computed: {
...mapState(['yoho']),
...mapState(["yoho"]),
currentSrc() {
return processImage(this.src, this.mode, this.width, this.height, false);
}
},
methods: {
onError() {
this.$emit('error');
this.$emit("error");
},
onUserClick() {
this.$emit("onUserClick");
}
}
};
... ...
<template>
<div class="avatar-wrap">
<ImageFormat class="img-avatar" :lazy="true" :src="imageSrc" :width="width" :height="height" @error="errorHandle"></ImageFormat>
<ImageFormat
class="img-avatar"
:lazy="true"
:src="imageSrc"
:width="width"
:height="height"
@error="errorHandle"
@onUserClick="userClickHandle"
></ImageFormat>
</div>
</template>
<script>
import ImageFormat from './image-format';
import ImageFormat from "./image-format";
export default {
name: 'WidgetAvatar',
name: "WidgetAvatar",
props: {
src: {
type: String,
default: ''
default: ""
},
width: {
type: Number,
... ... @@ -37,13 +45,14 @@ export default {
data() {
return {
imgSrc: this.src,
defaultSrc: 'https://img12.static.yhbimg.com/article/2019/02/26/16/02456ade977d8dfdbc4ca548b196c1d62b.png?imageView/2/w/{width}/h/{height}'
defaultSrc:
"https://img12.static.yhbimg.com/article/2019/02/26/16/02456ade977d8dfdbc4ca548b196c1d62b.png?imageView/2/w/{width}/h/{height}"
};
},
computed: {
imageSrc() {
return this.imgSrc || this.defaultSrc;
},
}
},
watch: {
src(val) {
... ... @@ -53,6 +62,9 @@ export default {
methods: {
errorHandle() {
this.imgSrc = this.defaultSrc;
},
userClickHandle() {
this.$emit("userClickHandle");
}
}
};
... ...
<template>
<div class="full">
<div class="header">
<div class="back-wrapper flex" @touchend="onBack">
<div class="back"></div>
</div>
<div class="title flex">
<span class="title-inner">UFO PASSPORT</span>
<span class="title-inner">UFO PASSPORT</span>
</div>
</div>
<div style="width: 100%;">
<div class="user-item">
<WidgetAvatar class="avatar-box" :class="{'avatar-opacity': userPassportInfo.headIcon}" :src="userPassportInfo.headIcon" :width="100" :height="100"></WidgetAvatar>
<p class="user-name">{{userPassportInfo.content}}</p>
<WidgetAvatar
class="avatar-box"
:class="{'avatar-opacity': userPassportInfo.headIcon}"
:src="userPassportInfo.headIcon"
:width="100"
:height="100"
@userClickHandle="jumpToUserPage(userPassportInfo.uid)"
></WidgetAvatar>
<p
class="user-name"
@click="jumpToUserPage(userPassportInfo.uid)"
>{{userPassportInfo.content}}</p>
<p class="user-time">{{userPassportInfo.timeStr}}购于UFO飞碟好物</p>
</div>
<div class="product-item">
<div class="medal-img"></div>
<ImgSize class="product-image" :src="shareIdentifyInfo.productImageUrl" :width="200" :height="200"></ImgSize>
<ImgSize
class="product-image"
:src="shareIdentifyInfo.productImageUrl"
:width="200"
:height="200"
></ImgSize>
<div class="product-size">{{shareIdentifyInfo.productSize}}码</div>
<div class="product-name">{{shareIdentifyInfo.productName}}</div>
<div class="provideo-btn" @click="playVideoOperation(shareIdentifyInfo.vedioFileUrl)"></div>
... ... @@ -36,7 +50,11 @@
<div class="recommend-list">
<ul>
<li v-for="item in ufoPassportProductList" :key="item.id" @click="goProductDetail(item.id)">
<li
v-for="item in ufoPassportProductList"
:key="item.id"
@click="goProductDetail(item.id, item.product_name)"
>
<ImgSize class="pro-img" :src="item.default_images" :width="200" :height="200"></ImgSize>
</li>
</ul>
... ... @@ -46,43 +64,50 @@
<div class="operate-wrap">
<button class="login-btn" @click="loginToUFoPage">登录UFO</button>
</div>
</div>
</div>
</template>
<script>
import WidgetAvatar from './components/widget-avatar';
import ImgSize from '../../../components/img-size';
import VideoPlayer from '../../../components/video-player';
import WidgetAvatar from "./components/widget-avatar";
import ImgSize from "../../../components/img-size";
import VideoPlayer from "../../../components/video-player";
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapMutations, mapActions} = createNamespacedHelpers('invite/invite');
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
"invite/invite"
);
export default {
name: 'ufoPassport',
name: "ufoPassport",
components: { WidgetAvatar, ImgSize, VideoPlayer },
data() {
return {
};
return {};
},
computed: {
...mapState(['ufoPassportProductList', 'shareIdentifyInfo', 'userPassportInfo']),
...mapState([
"ufoPassportProductList",
"shareIdentifyInfo",
"userPassportInfo"
])
},
methods: {
...mapMutations({
}),
...mapActions(['fetchUfoPassportProductList', 'fetchUfoShareIdentifyInfo']),
...mapMutations({}),
...mapActions(["fetchUfoPassportProductList", "fetchUfoShareIdentifyInfo"]),
onBack() {
this.$yoho.finishPage({});
},
loginToUFoPage() {
this.$yoho.goNewPage({
url: 'https://union.yoho.cn/union/app-downloads.html?union_type=100000000000349&client_id=1927079456&openby:yohobuy= {"action":"go.ufo","params":{"pagename":"home"}}'
url:
'https://union.yoho.cn/union/app-downloads.html?union_type=100000000000349&client_id=1927079456&openby:yohobuy= {"action":"go.ufo","params":{"pagename":"home"}}'
});
},
goProductDetail(productId) {
this.$yoho.goUfoProductDetail(productId);
jumpToUserPage(authorUid, authorType) {
this.$yoho.goUserCenter({ authorUid, authorType: 1 });
},
goProductDetail(skn, name) {
this.$yoho.goToUfoProductDetail({ skn, name, articleId: 0 });
},
playVideoOperation(videoUrl) {
if (!videoUrl) {
... ... @@ -92,9 +117,7 @@ export default {
}
},
mounted() {
this.fetchUfoShareIdentifyInfo(
{ tagId: this.$route.params.tagId }
);
this.fetchUfoShareIdentifyInfo({ tagId: this.$route.params.tagId });
this.fetchUfoPassportProductList();
}
... ... @@ -102,241 +125,241 @@ export default {
</script>
<style lang="scss" scoped>
.full {
position: relative;
background-color: #000;
.full {
position: relative;
background-color: #000;
}
.user-item {
width: 100%;
text-align: center;
}
.avatar-box {
margin-top: 105px;
width: 160px;
height: 160px;
border-radius: 50%;
opacity: 0;
transition: opacity 300ms ease-in-out;
&.avatar-opacity {
opacity: 1;
}
.user-item {
> img {
width: 100%;
text-align: center;
height: 100%;
display: block;
}
.avatar-box {
margin-top: 105px;
width: 160px;
height: 160px;
border-radius: 50%;
opacity: 0;
transition: opacity 300ms ease-in-out;
&.avatar-opacity {
opacity: 1;
}
> img {
width: 100%;
height: 100%;
display: block;
}
}
.user-name {
color: #fff;
font-weight: bold;
font-size: 40px;
margin-top: 16px;
line-height: 56px;
}
.user-time {
color: #b0b0b0;
font-size: 11px;
margin-top: 8px;
line-height: 32px;
}
.product-item {
display: inline-block;
text-align: center;
width: calc(100% - 104px);
margin-top: 40px;
margin-left: 52px;
margin-right: 52px;
background-color: #fff;
border-style: solid;
border-width: 20px;
border-color: #072f4a;
.medal-img {
position: absolute;
top: 425px;
right: 84px;
width: 100px;
height: 148px;
background-repeat: no-repeat;
background-image: url("~statics/image/passport/medal_img.png");
background-size: contain;
}
.user-name {
color: #fff;
font-weight: bold;
font-size: 40px;
.product-image {
display: inline-block;
margin-top: 16px;
line-height: 56px;
width: 120px;
height: 120px;
}
.user-time {
color: #b0b0b0;
font-size: 11px;
.product-size {
font-size: 24px;
color: #000;
line-height: 28px;
}
.product-name {
margin-top: 8px;
line-height: 32px;
margin-left: calc(50% - 176px);
font-size: 24px;
color: #000;
font-weight: 500;
max-height: 60px;
max-width: 352px;
}
.product-item {
.provideo-btn {
display: inline-block;
text-align: center;
width: calc(100% - 104px);
margin-top: 40px;
margin-left: 52px;
margin-right: 52px;
background-color: #fff;
border-style: solid;
border-width: 20px;
border-color: #072f4a;
.medal-img {
position: absolute;
top: 425px;
right: 84px;
width: 100px;
height: 148px;
background-repeat: no-repeat;
background-image: url("~statics/image/passport/medal_img.png");
background-size: contain;
}
.product-image {
display: inline-block;
margin-top: 16px;
width: 120px;
height: 120px;
}
.product-size {
font-size: 24px;
color: #000;
line-height: 28px;
}
.product-name {
margin-top: 8px;
margin-left: calc(50% - 176px);
font-size: 24px;
color: #000;
font-weight: 500;
max-height: 60px;
max-width: 352px;
}
.provideo-btn {
display: inline-block;
margin-top: 30px;
height: 48px;
width: 154px;
background-image: url("~statics/image/passport/identy_video_btn.png");
background-size: contain;
background-repeat: no-repeat;
}
.play-video {
display: block;
height: 30px;
opacity: 0;
}
margin-top: 30px;
height: 48px;
width: 154px;
background-image: url("~statics/image/passport/identy_video_btn.png");
background-size: contain;
background-repeat: no-repeat;
}
.identify-plat {
font-size: 22px;
color: #000;
letter-spacing: 0.5px;
line-height: 26px;
}
.play-video {
display: block;
height: 30px;
opacity: 0;
}
.identify-name {
margin-top: 18px;
font-size: 28px;
color: #000;
line-height: 34px;
}
.identify-plat {
font-size: 22px;
color: #000;
letter-spacing: 0.5px;
line-height: 26px;
}
.identify-level {
font-size: 22px;
color: #000;
line-height: 32px;
}
.identify-name {
margin-top: 18px;
font-size: 28px;
color: #000;
line-height: 34px;
}
.identify-image {
margin-top: 40px;
height: 592px;
background-repeat: no-repeat;
background-image: url("~statics/image/passport/identy_img.png");
background-size: contain;
}
.identify-level {
font-size: 22px;
color: #000;
line-height: 32px;
}
.recommend-shoes {
display: inline-block;
text-align: center;
margin-top: 100px;
.identify-image {
margin-top: 40px;
height: 592px;
background-repeat: no-repeat;
background-image: url("~statics/image/passport/identy_img.png");
background-size: contain;
}
}
.rec-little {
font-size: 24px;
color: #fff;
line-height: 34px;
}
.recommend-shoes {
display: inline-block;
text-align: center;
margin-top: 100px;
.rec-large {
margin-top: 14px;
font-size: 40px;
color: #fff;
line-height: 56px;
}
.rec-little {
font-size: 24px;
color: #fff;
line-height: 34px;
}
.recommend-list {
padding: 36px 44px 10px 52px;
overflow: hidden;
width: calc(100%);
ul {
width: 100%;
overflow: hidden;
}
.rec-large {
margin-top: 14px;
font-size: 40px;
color: #fff;
line-height: 56px;
}
}
li {
float: left;
width: calc((100% - 24px) / 3);
height: 210px;
margin: 0 8px 8px 0;
display: flex;
}
.recommend-list {
padding: 36px 44px 10px 52px;
overflow: hidden;
width: calc(100%);
.pro-img {
width: 100%;
height: 100%;
}
ul {
width: 100%;
overflow: hidden;
}
.operate-wrap {
padding: 60px 52px 100px;
li {
float: left;
width: calc((100% - 24px) / 3);
height: 210px;
margin: 0 8px 8px 0;
display: flex;
}
.login-btn {
width: 100%;
display: block;
font-size: 28px;
line-height: 100px;
color: #fff;
background: #072f4a;
}
.pro-img {
width: 100%;
height: 100%;
}
}
.header {
position: absolute;
.operate-wrap {
padding: 60px 52px 100px;
.login-btn {
width: 100%;
height: 45PX;
padding-left: 20PX;
padding-right: 20PX;
background-color: #000;
display: block;
font-size: 28px;
line-height: 100px;
color: #fff;
background: #072f4a;
}
}
.header {
position: absolute;
width: 100%;
height: 45px;
padding-left: 20px;
padding-right: 20px;
background-color: #000;
display: flex;
align-items: stretch;
box-sizing: border-box;
.flex {
display: flex;
align-items: stretch;
box-sizing: border-box;
align-items: center;
}
.flex {
display: flex;
align-items: center;
}
.back-wrapper {
height: 100%;
width: 60px;
}
.back-wrapper {
height: 100%;
width: 60PX;
}
.back {
width: 24px;
height: 24px;
background: url(~statics/image/alipay/back@3x.png) no-repeat;
background-size: cover;
}
.back {
width: 24PX;
height: 24PX;
background: url(~statics/image/alipay/back@3x.png) no-repeat;
background-size: cover;
}
.title {
flex: 1;
justify-content: center;
font-size: 17px;
overflow: hidden;
z-index: 1;
color: #fff;
font-weight: bold;
.title {
flex: 1;
justify-content: center;
font-size: 17PX;
.title-inner {
max-width: 90%;
overflow: hidden;
z-index: 1;
color: #fff;
font-weight: bold;
.title-inner {
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
}
}
</style>
... ...
{
"name": "ufo-app-web",
"version": "1.1.5",
"version": "1.1.6",
"private": true,
"description": "A New Yohobuy Project With Express",
"repository": {
... ...