Skip to content

S
shop-new
提交 a9f2b597 authored 作者: huaxinzhu's avatar huaxinzhu
浏览文件
操作

云仓官网-移动端

上级 62cf57a0
隐藏空白字符变更
内嵌 并排
正在显示 包含 328 行增加 和 116 行删除
src/views/entry/newyuncang.vue
浏览文件 @ a9f2b597
<template> <template>
<div class="content"> <div class="content">
<div class="yc-content" ref="searchBar"> <div class="yc-content pc-hide" ref="searchBar">
<!-- 头部 --> <!-- 头部 -->
<header :class="{ 'head-scroll': isScroll }"> <header :class="{ 'head-scroll': isScroll }">
<div class="header-con pc-hide"> <div class="header-con">
<ul class="nav"> <ul class="nav">
<li v-if="settitle && settitle.topLogo"> <li v-if="settitle && settitle.topLogo">
<img style="width:114px;height:35px;" :src="settitle.topLogo" alt=""> <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
</div> </div>
</header> </header>
<section class="banner"> <section class="banner">
<swiper :options="swiperOption" v-if="bannerList && bannerList.length > 0"> <swiper :options="swiperOption" v-if="bannerList && bannerList.length > 0">
<swiper-slide v-for="(item,index) in bannerList" :key="index"> <swiper-slide v-for="(item,index) in bannerList" :key="index">
<a :href="aLinkRes(item.redirect_url) " :target="returnBlank(item.redirect_url)"> <a :href="aLinkRes(item.redirect_url) " :target="returnBlank(item.redirect_url)">
...@@ -187,7 +186,9 @@ ...@@ -187,7 +186,9 @@
<div class="about-con"> <div class="about-con">
<div class="about-list"> <div class="about-list">
<ul> <ul>
<li v-for="(footerItem,index) in footerList" :key="index" @click="goToUser(footerItem.id)">{{ footerItem.title }}</li> <li v-for="(footerItem,index) in footerList" :key="index" @click="goToUser(footerItem.id)">{{
footerItem.title }}
</li>
</ul> </ul>
<p class="about-gs"> <p class="about-gs">
{{settitle.bottomCopyright}}  <img class="icon-image" style="margin-right:4px;" {{settitle.bottomCopyright}}  <img class="icon-image" style="margin-right:4px;"
...@@ -204,29 +205,86 @@ ...@@ -204,29 +205,86 @@
</div> </div>
<!-- 移动端 --> <!-- 移动端 -->
<!-- <div class="mobile-content">--> <div class="mobile-content">
<!-- <div class="m-header">--> <!-- 菜单 -->
<!-- <ul class="m-nav">--> <div class="mb-menu-icon-con" @click="drawer = true">
<!--&lt;!&ndash; <li v-if="settitle && settitle.topLogo">&ndash;&gt;--> <img src="../../assets/image/website/mobile-menu.png" alt="">
<!--&lt;!&ndash; <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">&ndash;&gt;--> </div>
<!--&lt;!&ndash; </li>&ndash;&gt;--> <el-drawer
<!-- <li>--> :visible.sync="drawer"
<!-- <a href="/">首页</a>--> >
<!-- </li>--> <!-- <li v-if="settitle && settitle.topLogo">-->
<!-- <li v-if="navigationObj.open">--> <!-- <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">-->
<!-- <a :href=" '//' + navigationObj.open" target="_blank">开放平台</a>-->
<!-- </li>-->
<!-- <li v-if="navigationObj.shop">-->
<!-- <a :href=" '//' + navigationObj.shop">云仓</a>-->
<!-- </li>--> <!-- </li>-->
<!-- <li>--> <ul class="mb-menu-list-con">
<!-- <a :href=" '//' + navigationObj.aboutUs + '/user' " target="_blank">关于我们</a>--> <li>
<!-- </li>--> <a href="/">首页</a>
<!-- </ul>--> </li>
<!-- </div>--> <li v-if="navigationObj.open">
<!-- &lt;!&ndash; 右上角 菜单图标 &ndash;&gt;--> <a :href=" '//' + navigationObj.open" target="_blank">开放平台</a>
<!-- <div>menu</div>--> </li>
<!-- </div>--> <li v-if="navigationObj.shop">
<a :href=" '//' + navigationObj.shop">云仓</a>
</li>
<li>
<a :href=" '//' + navigationObj.aboutUs + '/user' " target="_blank">关于我们</a>
</li>
<li @click="toLogin">
登 录
</li>
<li @click="toRegister">
注 册
</li>
</ul>
</el-drawer>
<!-- banner -->
<swiper class="mb-banner-con" :options="swiperOption" v-if="bannerList && bannerList.length > 0">
<swiper-slide v-for="(item,index) in bannerList" :key="index">
<a :href="aLinkRes(item.redirect_url) " :target="returnBlank(item.redirect_url)">
<img :src="item.image_url" alt="">
</a>
</swiper-slide>
</swiper>
<!-- 核心优势 -->
<div class="mb-advantage-con">
<p class="mb-ad-title">核心优势</p>
<swiper class="mb-advantage-con-swiper" :options="swiperADOption" v-if="cloud_advantage_lst && cloud_advantage_lst.length > 0">
<swiper-slide v-for="(adItem,index) in cloud_advantage_lst" :key="index">
<!-- <div class="mb-ad-advantage-details" :class="{ 'mb-ad-pic3': indexAddom === (index+1) }">-->
<div class="mb-ad-advantage-details">
<div :class="['mb-ad-pic' + (index+1),'ad-details-pic-con']"></div>
<p class="mb-ad-details-title">{{ adItem.title }}</p>
<p class="mb-ad-details">{{ adItem.content_summary }}</p>
</div>
</swiper-slide>
<!-- <div class="swiper-pagination"></div>-->
</swiper>
</div>
<!-- 入驻流程 -->
<div class="mb-process-con">
<p class="mb-process-con-title">入驻流程和材料</p>
<div class="mb-process">
<div class="mb-pre-process-con">
11
</div>
<div class="mb-pre-process-con">
22
</div>
</div>
<div class="mb-process">
<div class="mb-pre-process-con">
33
</div>
<div class="mb-pre-process-con">
44
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -237,7 +295,8 @@ ...@@ -237,7 +295,8 @@
/** HACK /** HACK
* 解决 swiper 轮播图不自动轮播问题 * 解决 swiper 轮播图不自动轮播问题
* */ * */
import Swiper2,{Autoplay} from 'swiper'; import Swiper2, {Autoplay} from 'swiper';
Swiper2.use([Autoplay]); Swiper2.use([Autoplay]);
/** 仅对官网进行 所有适配 /** 仅对官网进行 所有适配
...@@ -245,30 +304,31 @@ ...@@ -245,30 +304,31 @@
* 对 html 根目录 的font-size 进行设置 * 对 html 根目录 的font-size 进行设置
* */ * */
//是否是移动端 //是否是移动端
;(function() { ;(function () {
// 获取屏幕区域的宽度 // 获取屏幕区域的宽度
let w = document.documentElement.clientWidth let w = document.documentElement.clientWidth
if(w < 961) { if (w < 961) {
// console.log(24,w);
// 获取html根元素 // 获取html根元素
let htmlNode = document.querySelector('html') let htmlNode = document.querySelector('html')
// 设置根字体大小 // 设置根字体大小
// let htmlFSType = 1; // let htmlFSType = 1;
if (w/375 < 1.5) { // if (w / 750 < 1.5) {
htmlNode.style.fontSize = 16 + 'px' // htmlNode.style.fontSize = 16 + 'px'
} else if ( 1.5 <= w/375 < 2) { // } else if (1.5 <= w / 375 < 2) {
htmlNode.style.fontSize = 24 + 'px' // htmlNode.style.fontSize = 24 + 'px'
} else if (2 <= w/375 <= 2.56 ) { // } else if (2 <= w / 375 <= 2.56) {
htmlNode.style.fontSize = 32 + 'px' // htmlNode.style.fontSize = 32 + 'px'
} // }
// htmlNode.style.fontSize = w / 375 + 'px' htmlNode.style.fontSize = w / 750 * 50 * 2 + 'px'
console.log("根html字体大小：",htmlNode.style.fontSize); console.log("根html字体大小：",w, htmlNode.style.fontSize);
} else {
console.log("说明当前屏幕宽度大于960",w);
} }
})(); })();
export default { export default {
name: "newyuncang", name: "newyuncang",
metaInfo () { metaInfo() {
return { return {
title: this.keyTitle, title: this.keyTitle,
meta: [ meta: [
...@@ -316,11 +376,12 @@ ...@@ -316,11 +376,12 @@
isLight: 0, isLight: 0,
navigationObj: { navigationObj: {
'home': '', 'home': '',
'open':'', 'open': '',
'shop':'', 'shop': '',
'aboutUs':'', 'aboutUs': '',
}, },
gwToken: '', gwToken: '',
// banner 轮播设置参数
swiperOption: { swiperOption: {
loop: true, // 循环模式选项 loop: true, // 循环模式选项
pagination: { pagination: {
...@@ -338,62 +399,70 @@ ...@@ -338,62 +399,70 @@
// Slides的滑动方向，可设置水平(horizontal)或垂直(vertical) // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
direction: 'horizontal', direction: 'horizontal',
// 一个屏幕展示的数量 // 一个屏幕展示的数量
slidesPerView: 1 slidesPerView: 1,
observer: true,
observeParents: true
},
// 核心优势 轮播循环设置参数
swiperADOption: {
loop: false,
}, },
// logo // logo
detail_img1: { detail_img1: {
index: 1, index: 1,
type: '', type: '',
logo_urls: [ logo_urls: [
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
] ]
}, },
detail_img2: { detail_img2: {
index: 2, index: 2,
type: '', type: '',
logo_urls: [ logo_urls: [
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
] ]
}, },
detail_img3: { detail_img3: {
index: 3, index: 3,
type: '', type: '',
logo_urls: [ logo_urls: [
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
] ]
}, },
detail_img4: { detail_img4: {
index: 4, index: 4,
type: '', type: '',
logo_urls: [ logo_urls: [
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
{url: ''},{url: ''},{url: ''},{url: ''}, {url: ''}, {url: ''}, {url: ''}, {url: ''},
] ]
}, },
footerList: [ footerList: [
{ {
id:1, title:'企业简介' id: 1, title: '企业简介'
}, },
{ {
id:2, title:'发展历程' id: 2, title: '发展历程'
}, },
{ {
id:3, title:'荣誉资质' id: 3, title: '荣誉资质'
}, },
{ {
id:4, title:'团队介绍' id: 4, title: '团队介绍'
}, },
{ {
id:5, title:'新闻动态' id: 5, title: '新闻动态'
} }
], ],
// 移动端 相关
drawer: false,
} }
}, },
created() { created() {
...@@ -414,25 +483,26 @@ ...@@ -414,25 +483,26 @@
methods: { methods: {
/** 动态获取 sso 配置域名 */ /** 动态获取 sso 配置域名 */
getssourl(){ getssourl() {
var ssa = window.location.host var ssa = window.location.host
let data = { domain:ssa } let data = {domain: ssa}
this.$store.dispatch('getssourl', data) this.$store.dispatch('getssourl', data)
.then((res) => { .then((res) => {
if(res.code==1){ if (res.code == 1) {
this.ssourl = res.data.sso_url this.ssourl = res.data.sso_url
//this.gotosso() //this.gotosso()
} }
}).catch(() => {}) }).catch(() => {
})
},
IsPc() {
let userAgent = navigator.userAgent
let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
console.log('userAgent:', userAgent)
return Agents.some((i) => {
return userAgent.includes(i)
})
}, },
IsPc() {
let userAgent = navigator.userAgent
let Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
console.log('userAgent:',userAgent)
return Agents.some((i)=>{
return userAgent.includes(i)
})
},
// 获取渠道id // 获取渠道id
getIndexInfo() { getIndexInfo() {
let op = 'open' let op = 'open'
...@@ -494,25 +564,13 @@ ...@@ -494,25 +564,13 @@
} }
// banner图 // banner图
if (res.data.cloud_banner_lst && res.data.cloud_banner_lst.banners_json && res.data.cloud_banner_lst.banners_json.length > 0) { if (res.data.cloud_banner_lst && res.data.cloud_banner_lst.banners_json && res.data.cloud_banner_lst.banners_json.length > 0) {
// <<<<<<< HEAD
//
// let bannerarr = []
// res.data.cloud_banner_lst.banners_json.forEach(element => {
// if(element.image_url){
// bannerarr.push(element)
// }
// });
// this.bannerList = bannerarr
// =======
// this.bannerList = res.data.cloud_banner_lst.banners_json;
let bannerArr = [] let bannerArr = []
res.data.cloud_banner_lst.banners_json.forEach(element => { res.data.cloud_banner_lst.banners_json.forEach(element => {
if(element.image_url) { if (element.image_url) {
bannerArr.push(element); bannerArr.push(element);
} }
}); });
this.bannerList = bannerArr this.bannerList = bannerArr
// >>>>>>> dev_hxz
} }
// logo 图 // logo 图
if (res.data.cloud_supplier_lst && res.data.cloud_supplier_lst.detail_json) { if (res.data.cloud_supplier_lst && res.data.cloud_supplier_lst.detail_json) {
...@@ -527,9 +585,9 @@ ...@@ -527,9 +585,9 @@
/** banner 图是否能跳转链接 处理 */ /** banner 图是否能跳转链接 处理 */
aLinkRes(link) { aLinkRes(link) {
let resLink = '' let resLink = ''
if ( link ) { if (link) {
resLink = link resLink = link
}else { } else {
resLink = 'javascript:void(0);' resLink = 'javascript:void(0);'
} }
...@@ -537,9 +595,9 @@ ...@@ -537,9 +595,9 @@
}, },
returnBlank(val) { returnBlank(val) {
let res = '' let res = ''
if ( val ) { if (val) {
res = '_blank' res = '_blank'
}else { } else {
res = '' res = ''
} }
return res return res
...@@ -596,19 +654,6 @@ ...@@ -596,19 +654,6 @@
</script> </script>
<style lang="scss" type="text/stylus" scoped> <style lang="scss" type="text/stylus" scoped>
header, section, footer, ul, li, p, dl, dt, dd {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.yc-content {
width: 100%;
height: 100%;
}
/* 手机竖屏时，可视区域的最大宽度为 480 */ /* 手机竖屏时，可视区域的最大宽度为 480 */
//@media screen and (max-width: 480px) and (orientation: portrait) { //@media screen and (max-width: 480px) and (orientation: portrait) {
// .pc-hide { // .pc-hide {
...@@ -632,14 +677,39 @@ ...@@ -632,14 +677,39 @@
@media screen and (max-width: 961px) { @media screen and (max-width: 961px) {
.pc-hide { .pc-hide {
display: none!important; display: none !important;
}
.mobile-content {
display: block!important;
font-size: 0.16rem;
} }
.mobile-show { }
@media screen and (min-width: 960px) {
//.pc-hide {
// display: block !important;
//}
.mobile-content {
display: none!important; display: none!important;
} }
} }
/* 公用 */ /* 公用 */
header, section, footer, ul, li, p, dl, dt, dd {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.yc-content {
width: 100%;
height: 100%;
}
/* header */ /* header */
header { header {
...@@ -816,18 +886,19 @@ ...@@ -816,18 +886,19 @@
} }
.ad-details { .ad-details {
width:100%; width: 100%;
padding: 30px; padding: 30px;
color: #333333; color: #333333;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 28px; line-height: 28px;
word-wrap:break-word; word-wrap: break-word;
text-align: justify; text-align: justify;
text-align-last: center; text-align-last: center;
-ms-text-align-last: center; -ms-text-align-last: center;
-moz-text-align-last: center; -moz-text-align-last: center;
} }
//.ad-details:after { //.ad-details:after {
// content: ''; // content: '';
// display : inline-block; // display : inline-block;
...@@ -1044,7 +1115,8 @@ ...@@ -1044,7 +1115,8 @@
.clothes:hover, .electrical:hover, .food:hover, .maternal:hover { .clothes:hover, .electrical:hover, .food:hover, .maternal:hover {
color: #1966FF; color: #1966FF;
} }
/*品牌 logo*/
/*品牌 logo*/
.brand-carousel { .brand-carousel {
width: 100%; width: 100%;
min-width: 600px; min-width: 600px;
...@@ -1078,22 +1150,22 @@ ...@@ -1078,22 +1150,22 @@
} }
.el-carousel-item-spe { .el-carousel-item-spe {
display : flex; display: flex;
justify-content : start; justify-content: start;
flex-direction :row; flex-direction: row;
flex-flow: wrap; flex-flow: wrap;
padding: 20px 0; padding: 20px 0;
} }
.pre-img-con { .pre-img-con {
width:169px; width: 169px;
height:75px; height: 75px;
margin:20px 10px; margin: 20px 10px;
overflow : hidden; overflow: hidden;
} }
.pre-img { .pre-img {
width:100%; width: 100%;
height: 100%; height: 100%;
} }
...@@ -1191,4 +1263,144 @@ ...@@ -1191,4 +1263,144 @@
color: #FFFFFF; color: #FFFFFF;
line-height: 40px; line-height: 40px;
} }
/********** 移动端 start *********/
/* 菜单 */
.mb-menu-icon-con {
width: 0.32rem;
height: 0.27rem;
position: fixed;
top: 0;
right: 0;
margin: 0.26rem;
font-size: 0.16rem;
background-color : #eee;
border-radius: 2px;
z-index: 999;
}
.mb-menu-icon-con > img {
width: 100%;
height: 100%;
}
.mb-menu-list-con {
}
.mb-menu-list-con > li {
margin: 5px 10px;
}
/* banner */
.mb-banner-con {
width: 100%;
height: 3.25rem;
}
.mb-banner-con img {
width: 100%;
height : 100%;
}
/* 核心优势 */
.mb-advantage-con {
width: 100%;
}
.mb-ad-title {
height: 0.4rem;
line-height: 0.4rem;
font-size: 0.4rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #000000;
text-align: center;
margin: 0.62rem 0 0.43rem;
}
.mb-advantage-con-swiper {
width: 100%;
height: 6.69rem;
}
.mb-ad-advantage-details {
width: calc(100% - 0.32rem);
height: 6.36rem;
overflow: hidden;
margin: 0 0.16rem;
background: #fff url("../../assets/image/website/adfooter.png") no-repeat bottom center;
background-size : contain;
border-radius: 8px;
}
.ad-details-pic-con {
width: 1.27rem;
height: 1.32rem;
margin: 0 auto;
}
.mb-ad-pic1 {
background: url("../../assets/image/website/ad1.png") no-repeat center center;
background-size: cover;
}
.mb-ad-pic2 {
background: url("../../assets/image/website/ad2.png") no-repeat center center;
background-size: cover;
}
.mb-ad-pic3 {
background: url("../../assets/image/website/ad3.png") no-repeat center center;
background-size: cover;
}
.mb-ad-pic4 {
background: url("../../assets/image/website/ad4.png") no-repeat center center;
background-size: cover;
}
.mb-ad-details-title{
margin: 0.15rem auto;
line-height: 0.6rem;
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #1D8EFE;
text-align : center;
}
.mb-ad-details {
width: 5rem;
margin: 0.3rem auto;
color: #333;
font-size: 0.28rem;
line-height: 0.48rem;
font-weight: 400;
word-wrap: break-word;
text-align: justify;
text-align-last: center;
-ms-text-align-last: center;
-moz-text-align-last: center;
}
/*入驻流程*/
.mb-process-con {
background-color: #f9f9fa;
padding: 0.3rem 0;
}
.mb-process-con-title {
height: 0.4rem;
line-height: 0.4rem;
font-size: 0.4rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #000000;
text-align: center;
margin: 0 atuo;
}
.mb-process {
display: flex;
justify-content : space-around;
flex-direction : row;
}
.mb-pre-process-con {
padding: 0.3rem;
background-color: #fff;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论