Skip to content

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

云仓官网-移动端

上级 62cf57a0
显示空白字符变更
内嵌 并排
正在显示 包含 328 行增加 和 116 行删除
src/views/entry/newyuncang.vue
浏览文件 @ a9f2b597
<template>
<div class="content">
<div class="yc-content" ref="searchBar">
<div class="yc-content pc-hide" ref="searchBar">
<!-- 头部 -->
<header :class="{ 'head-scroll': isScroll }">
<div class="header-con pc-hide">
<div class="header-con">
<ul class="nav">
<li v-if="settitle && settitle.topLogo">
<img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">
......@@ -28,7 +28,6 @@
</div>
</header>
<section class="banner">
<swiper :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)">
......@@ -187,7 +186,9 @@
<div class="about-con">
<div class="about-list">
<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>
<p class="about-gs">
{{settitle.bottomCopyright}}  <img class="icon-image" style="margin-right:4px;"
......@@ -204,29 +205,86 @@
</div>
<!-- 移动端 -->
<!-- <div class="mobile-content">-->
<!-- <div class="m-header">-->
<!-- <ul class="m-nav">-->
<!--&lt;!&ndash; <li v-if="settitle && settitle.topLogo">&ndash;&gt;-->
<!--&lt;!&ndash; <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">&ndash;&gt;-->
<!--&lt;!&ndash; </li>&ndash;&gt;-->
<!-- <li>-->
<!-- <a href="/">首页</a>-->
<!-- </li>-->
<!-- <li v-if="navigationObj.open">-->
<!-- <a :href=" '//' + navigationObj.open" target="_blank">开放平台</a>-->
<!-- </li>-->
<!-- <li v-if="navigationObj.shop">-->
<!-- <a :href=" '//' + navigationObj.shop">云仓</a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a :href=" '//' + navigationObj.aboutUs + '/user' " target="_blank">关于我们</a>-->
<div class="mobile-content">
<!-- 菜单 -->
<div class="mb-menu-icon-con" @click="drawer = true">
<img src="../../assets/image/website/mobile-menu.png" alt="">
</div>
<el-drawer
:visible.sync="drawer"
>
<!-- <li v-if="settitle && settitle.topLogo">-->
<!-- <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- &lt;!&ndash; 右上角 菜单图标 &ndash;&gt;-->
<!-- <div>menu</div>-->
<!-- </div>-->
<ul class="mb-menu-list-con">
<li>
<a href="/">首页</a>
</li>
<li v-if="navigationObj.open">
<a :href=" '//' + navigationObj.open" target="_blank">开放平台</a>
</li>
<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>
</template>
......@@ -237,7 +295,8 @@
/** HACK
* 解决 swiper 轮播图不自动轮播问题
* */
import Swiper2,{Autoplay} from 'swiper';
import Swiper2, {Autoplay} from 'swiper';
Swiper2.use([Autoplay]);
/** 仅对官网进行 所有适配
......@@ -245,30 +304,31 @@
* 对 html 根目录 的font-size 进行设置
* */
//是否是移动端
;(function() {
;(function () {
// 获取屏幕区域的宽度
let w = document.documentElement.clientWidth
if(w < 961) {
// console.log(24,w);
if (w < 961) {
// 获取html根元素
let htmlNode = document.querySelector('html')
// 设置根字体大小
// let htmlFSType = 1;
if (w/375 < 1.5) {
htmlNode.style.fontSize = 16 + 'px'
} else if ( 1.5 <= w/375 < 2) {
htmlNode.style.fontSize = 24 + 'px'
} else if (2 <= w/375 <= 2.56 ) {
htmlNode.style.fontSize = 32 + 'px'
}
// htmlNode.style.fontSize = w / 375 + 'px'
console.log("根html字体大小：",htmlNode.style.fontSize);
// if (w / 750 < 1.5) {
// htmlNode.style.fontSize = 16 + 'px'
// } else if (1.5 <= w / 375 < 2) {
// htmlNode.style.fontSize = 24 + 'px'
// } else if (2 <= w / 375 <= 2.56) {
// htmlNode.style.fontSize = 32 + 'px'
// }
htmlNode.style.fontSize = w / 750 * 50 * 2 + 'px'
console.log("根html字体大小：",w, htmlNode.style.fontSize);
} else {
console.log("说明当前屏幕宽度大于960",w);
}
})();
export default {
name: "newyuncang",
metaInfo () {
metaInfo() {
return {
title: this.keyTitle,
meta: [
......@@ -316,11 +376,12 @@
isLight: 0,
navigationObj: {
'home': '',
'open':'',
'shop':'',
'aboutUs':'',
'open': '',
'shop': '',
'aboutUs': '',
},
gwToken: '',
// banner 轮播设置参数
swiperOption: {
loop: true, // 循环模式选项
pagination: {
......@@ -338,62 +399,70 @@
// Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
direction: 'horizontal',
// 一个屏幕展示的数量
slidesPerView: 1
slidesPerView: 1,
observer: true,
observeParents: true
},
// 核心优势 轮播循环设置参数
swiperADOption: {
loop: false,
},
// logo
detail_img1: {
index: 1,
type: '',
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: {
index: 2,
type: '',
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: {
index: 3,
type: '',
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: {
index: 4,
type: '',
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: [
{
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() {
......@@ -414,22 +483,23 @@
methods: {
/** 动态获取 sso 配置域名 */
getssourl(){
getssourl() {
var ssa = window.location.host
let data = { domain:ssa }
let data = {domain: ssa}
this.$store.dispatch('getssourl', data)
.then((res) => {
if(res.code==1){
if (res.code == 1) {
this.ssourl = res.data.sso_url
//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)=>{
let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
console.log('userAgent:', userAgent)
return Agents.some((i) => {
return userAgent.includes(i)
})
},
......@@ -494,25 +564,13 @@
}
// banner图
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 = []
res.data.cloud_banner_lst.banners_json.forEach(element => {
if(element.image_url) {
if (element.image_url) {
bannerArr.push(element);
}
});
this.bannerList = bannerArr
// >>>>>>> dev_hxz
}
// logo 图
if (res.data.cloud_supplier_lst && res.data.cloud_supplier_lst.detail_json) {
......@@ -527,9 +585,9 @@
/** banner 图是否能跳转链接 处理 */
aLinkRes(link) {
let resLink = ''
if ( link ) {
if (link) {
resLink = link
}else {
} else {
resLink = 'javascript:void(0);'
}
......@@ -537,9 +595,9 @@
},
returnBlank(val) {
let res = ''
if ( val ) {
if (val) {
res = '_blank'
}else {
} else {
res = ''
}
return res
......@@ -596,19 +654,6 @@
</script>
<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 */
//@media screen and (max-width: 480px) and (orientation: portrait) {
// .pc-hide {
......@@ -632,14 +677,39 @@
@media screen and (max-width: 961px) {
.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;
}
}
/* 公用 */
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 {
......@@ -816,18 +886,19 @@
}
.ad-details {
width:100%;
width: 100%;
padding: 30px;
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 28px;
word-wrap:break-word;
word-wrap: break-word;
text-align: justify;
text-align-last: center;
-ms-text-align-last: center;
-moz-text-align-last: center;
}
//.ad-details:after {
// content: '';
// display : inline-block;
......@@ -1044,7 +1115,8 @@
.clothes:hover, .electrical:hover, .food:hover, .maternal:hover {
color: #1966FF;
}
/*品牌 logo*/
/*品牌 logo*/
.brand-carousel {
width: 100%;
min-width: 600px;
......@@ -1078,22 +1150,22 @@
}
.el-carousel-item-spe {
display : flex;
justify-content : start;
flex-direction :row;
display: flex;
justify-content: start;
flex-direction: row;
flex-flow: wrap;
padding: 20px 0;
}
.pre-img-con {
width:169px;
height:75px;
margin:20px 10px;
overflow : hidden;
width: 169px;
height: 75px;
margin: 20px 10px;
overflow: hidden;
}
.pre-img {
width:100%;
width: 100%;
height: 100%;
}
......@@ -1191,4 +1263,144 @@
color: #FFFFFF;
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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论