fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by TaoHuang
Commit 5fbe443a8381952c08b171948364eaf80464b228 2 parents 6d77883b 2ac450ca

Merge remote-tracking branch 'origin/develop' into develop

Inline Side-by-side
Showing 14 changed files with 151 additions and 82 deletions
... ... @@ -87,11 +87,9 @@ export default {
<style lang="scss">
.layout {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 24px;
display: flex;
... ... @@ -109,4 +107,6 @@ export default {
overflow: scroll;
}
}
</style>
... ...
... ... @@ -14,11 +14,18 @@
</div>
<img :src="item.image" alt=""/>
</li>
<li>
<img :src="images.rule">
</li>
<li>
<a href="javascript:void(0)" class="button-more" @click="gotoProductPool">
<img :src="images.more">
</a>
</li>
</ul>
</LayoutApp>
</template>
<script>
import productData from './saleProduct.json';
... ... @@ -26,8 +33,9 @@ export default {
name: 'Strategy',
data() {
return {
productList: []
}
productList: [],
images: {}
};
},
methods: {
goBack() {
... ... @@ -42,10 +50,23 @@ export default {
productId: linkItem.linkId
}
});
},
gotoProductPool() {
this.$router.push({
name: 'List',
query: {
productPool: 445
}
});
}
},
mounted() {
activated() {
this.productList = productData.imageList;
this.images = {
rule: productData.imageList[0].rule,
more: productData.imageList[0].more
};
console.log(this.productList)
}
};
</script>
... ... @@ -56,6 +77,10 @@ ul {
list-style: none;
margin: 0;
padding: 0;
background-image: url("//ad.yoho.cn/html5/2019/10/activity/007/base/repeat_bg.jpg?imageslim");
background-repeat: repeat-y;
background-size: 100% auto;
overflow: hidden;
-webkit-overflow-scrolling: touch;
li {
... ... @@ -84,6 +109,13 @@ ul {
background-color: transparent;
}
}
.button-more {
display: block;
width: 530px;
height: 45px;
margin: 20px auto 60px auto;
}
}
}
</style>
... ...
{
"imageList": [
{
"image": "//cdn.yoho.cn/saleList/bg/1p_01.jpg?imageView2/2/w/750/format/jpg",
"image": "//cdn.yoho.cn/saleList/bg/1p_02.jpg?imageView2/2/w/750/format/jpg",
"rule": "//ad.yoho.cn/html5/2019/10/activity/007/base/list_rule.png",
"more": "//ad.yoho.cn/html5/2019/10/activity/007/base/btn_more.png",
"urls": [
{
"left": "2rem",
... ...
... ... @@ -127,7 +127,7 @@ export default {
this.$store.dispatch('reportYas', {
params: {
appop: 'XY_UFO_SHOW_EVENT',
param: reportParams
param: {DATA:reportParams}
}
});
... ...
... ... @@ -81,7 +81,7 @@ export default {
isFetching: false,
error: null,
page: 0, // 当前页
page_size: 10, // 每页数量
page_size: 20, // 每页数量
page_total: 0, // 总共多少页
total: 0, // 总共多少条
endReached: false, // 到达底部
... ... @@ -163,6 +163,13 @@ export default {
appop: 'XY_UFO_MAIN_START'
}
});
// 初始化 选中类目
const [firstNav] = this.navList;
if(firstNav) {
const {url = ''} = firstNav;
this.selectedCategory = queryString.parse(url);
}
this.refreshProductList(this.active);
},
methods: {
... ... @@ -239,7 +246,7 @@ export default {
// console.log(this.homeYasParams)
this.$store.dispatch('reportYas', {
params: {
param: this.homeYasParams,
param: {DATA:this.homeYasParams},
appop: 'XY_UFO_SHOW_EVENT'
}
});
... ... @@ -271,7 +278,7 @@ export default {
TAB_NAME: params.title});
}
},
async getIndex({index, params}) {
async getIndex({index, params}) {
this.selectedCategory = params;
this.active = Number(index);
this.isShow && this.$refs.scroll.scrollTo(this.navTop);
... ... @@ -463,18 +470,9 @@ export default {
}
.channel-body {
height: 100%;
position: relative;
&:before {
content: "";
width: 100%;
height: 400px;
background: #08304B;
position: absolute;
top: 0;
z-index: -1;
}
background-image: url("//img11.static.yhbimg.com/yhb-img01/2019/10/30/18/0178208a1e983631c677399822cd56abae.png");
background-size: 100%;
background-repeat: no-repeat;
}
.channel-html {
... ...
... ... @@ -36,7 +36,7 @@ export default {
// console.log(this.list)
},
methods: {
},
};
</script>
... ... @@ -49,21 +49,6 @@ export default {
height: 402px;
margin-left: 8px;
margin-right: 8px;
.swiper-item {
position: relative;
// &:after {
// content: "";
// position: absolute;
// width: 100%;
// height: 100%;
// z-index: -2;
// border-radius: 8px;
// box-shadow: 0 0 30px #dcdcdc;
// bottom: 0;
// background-color: transparent;
// }
}
.swiper-item-left {
width: 44%;
... ... @@ -74,19 +59,7 @@ export default {
display: flex;
flex-direction: column;
justify-content: space-between;
.img-link2 {
&:after {
content: "";
position: absolute;
width: 100%;
height: 45%;
z-index: -2;
border-radius: 8px;
box-shadow: 0 0 30px #dcdcdc;
bottom: 0;
background-color: transparent;
}
}
.img-link {
height: 196px;
}
... ...
... ... @@ -102,4 +102,14 @@ export default {
width: 100%;
background-color: white;
}
@supports (bottom: env(safe-area-inset-bottom)) {
.content {
height: calc(env(safe-area-inset-bottom) + 100% + 88px);
}
.footer {
height: calc(env(safe-area-inset-bottom) + 100px);
}
}
</style>
... ...
<template>
<LayoutApp title="闲鱼潮玩转攻略" :show-back="true" :back-action="goBack">
<ul>
<li v-for="(item, index) in dataList" :key="index">
<div v-if="item.urls && item.urls.length > 0" class="link-container">
<a href="javascript:;"
v-for="linkItem in item.urls"
:key="linkItem.link"
:style="{left: linkItem.left, top: linkItem.top, width: linkItem.width, height: linkItem.height}"
@click="jumpTo"
:data-item="JSON.stringify(linkItem)"
>
</a>
</div>
<img :src="item.image" alt=""/>
</li>
</ul>
<div class="body-warpper">
<ul>
<li v-for="(item, index) in dataList" :key="index">
<div v-if="item.urls && item.urls.length > 0" class="link-container">
<a href="javascript:;"
v-for="linkItem in item.urls"
:key="linkItem.link"
:style="{left: linkItem.left, top: linkItem.top, width: linkItem.width, height: linkItem.height}"
@click="jumpTo"
:data-item="JSON.stringify(linkItem)"
>
</a>
</div>
<img :src="item.image" alt=""/>
</li>
</ul>
</div>
</LayoutApp>
</template>
... ... @@ -57,12 +61,20 @@ export default {
</script>
<style lang="scss" scoped>
.body-warpper {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
li {
position: relative;
... ...
<template>
<LayoutApp :title="currentTitle" :show-back="true" :back-action="goBack">
<ul>
<li v-for="(item, index) in currentList" :key="index">
<img :src="item.image" alt=""/>
</li>
</ul>
<div class="body-warpper">
<ul>
<li v-for="(item, index) in currentList" :key="index">
<img :src="item.image" alt=""/>
</li>
</ul>
</div>
</LayoutApp>
</template>
... ... @@ -54,12 +56,20 @@ export default {
</script>
<style lang="scss" scoped>
.body-warpper {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
li {
position: relative;
... ...
... ... @@ -142,6 +142,17 @@ export default {
// height: 498px;
background: #fff;
margin-bottom: 16px;
position: relative;
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
}
.item-top {
... ...
... ... @@ -80,7 +80,7 @@ export default {
},
searchGoods: function() {
this.addLocalWord();
this.yasInput({type: 0, index: 0});
this.yasInput({type: 0, index: 0, query: this.query});
this.$router.push({
name: 'List',
query: {
... ... @@ -96,6 +96,7 @@ export default {
let query = parameters.query;
this.addLocalWord(query);
param.query = query;
this.yasInput(param);
this.$router.push({
name: 'List',
... ... @@ -138,10 +139,10 @@ export default {
params: {
param: {
SEARCH_POS: this.SEARCH_POS,
KEYWORD: this.query,
KEYWORD: param.query,
POS_ID: param.type,
TYPE_ID: 1,
FLR_INDEX: param.index + 1,
FLR_INDEX: param.type ? param.index + 1 : 0,
},
appop: 'XY_UFO_HOME_KEYWORD_SEARCH_C'
}
... ...
... ... @@ -526,6 +526,8 @@ textarea {
html,
body {
width: 100%;
height: 100%;
font-size: 24px;
font-family: "PingFang SC", "HiraginoSansGB-W3", "SanFranciscoText-Regular", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
line-height: 1.4;
... ... @@ -537,6 +539,24 @@ body {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#app {
position: relative;
width: 100%;
height: 100%;
}
/* 支持iphoneX下方安全区域 */
@supports (bottom: env(safe-area-inset-bottom)) {
body {
margin-bottom: env(safe-area-inset-bottom);
}
#app {
height: calc(100% + env(safe-area-inset-bottom));
}
}
/* stylelint-disable */
... ...
... ... @@ -5,7 +5,7 @@
<title>{{title}}</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no" name="format-detection">
... ...
... ... @@ -5,7 +5,7 @@
<title>{{title}} {{#unless noYohoTitle}}{{yohoTitle}}{{/unless}}</title>
<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
... ...