Skip to content

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

1、swiper降级使用文档版本5.45；2、官网移动端适配；3、bug修复

上级 af68b883
隐藏空白字符变更
内嵌 并排
正在显示 包含 468 行增加 和 77 行删除
package.json
浏览文件 @ ddf8e0e9
......@@ -60,6 +60,7 @@
"path-to-regexp": "2.4.0",
"screenfull": "4.2.0",
"sortablejs": "1.8.4",
"swiper": "^5.4.5",
"vue": "2.6.10",
"vue-awesome-swiper": "^4.1.1",
"vue-count-to": "1.0.13",
......@@ -104,7 +105,6 @@
"serve-static": "^1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.0",
"swiper": "^6.8.0",
"vue-template-compiler": "2.6.10"
},
"engines": {
......
src/main.js
浏览文件 @ ddf8e0e9
......@@ -23,9 +23,8 @@ import { deepClone } from "@/utils/index";
import Pagination from "@/components/Pagination";
import VueAwesomeSwiper from 'vue-awesome-swiper' // 引入swiper
import 'swiper/css/swiper.min.css' // 引入swiper样式/
Vue.use(VueAwesomeSwiper) // 注册swiper
// import 'swiper/css/swiper.css' // 引入swiper样式/
import 'swiper/swiper-bundle.css'
// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
......
src/views/entry/newyuncang.vue
浏览文件 @ ddf8e0e9
......@@ -153,6 +153,7 @@
<div class="pre-img-con" v-for="(item,index) in detail_img1.logo_urls" :key="index">
<img class="pre-img" :src="item.url" alt="">
</div>
</el-carousel-item>
<el-carousel-item class="pre-el-carousel-item el-carousel-item-spe" name="2">
......@@ -213,9 +214,9 @@
<el-drawer
:visible.sync="drawer"
>
<!-- <li v-if="settitle && settitle.topLogo">-->
<!-- <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">-->
<!-- </li>-->
<!-- <li v-if="settitle && settitle.topLogo">-->
<!-- <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">-->
<!-- </li>-->
<ul class="mb-menu-list-con">
<li>
<a href="/">首页</a>
......@@ -249,7 +250,8 @@
<!-- 核心优势 -->
<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 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">
......@@ -258,7 +260,7 @@
<p class="mb-ad-details">{{ adItem.content_summary }}</p>
</div>
</swiper-slide>
<!-- <div class="swiper-pagination"></div>-->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
......@@ -268,26 +270,113 @@
<div class="mb-process">
<div class="mb-pre-process-con">
<div class="step-pic">
<img src="" alt="">
<img src="../../assets/image/website/step1.png" alt="">
</div>
<p></p>
<p></p>
<p class="step-title">第一步：注册账号</p>
<p class="step-cont-text">进入云仓官网，注册账号,注册完成后，填写相关信息</p>
</div>
<div class="mb-pre-process-con">
22
<div class="step-pic">
<img src="../../assets/image/website/step2.png" alt="">
</div>
<p class="step-title">第二步：填写信息</p>
<p class="step-cont-text">确认在线协议填写公司主体信息填写店铺信息提交相关资质</p>
</div>
</div>
<div class="mb-process">
<div class="mb-pre-process-con">
33
<div class="step-pic">
<img src="../../assets/image/website/step3.png" alt="">
</div>
<p class="step-title">第三步：等待审核</p>
<p class="step-cont-text">云仓工作人员会在1-3个工作日内反馈审核结果，商家可通过登录查询审核进度</p>
</div>
<div class="mb-pre-process-con">
44
<div class="step-pic">
<img src="../../assets/image/website/step4.png" alt="">
</div>
<p class="step-title">第四步：发布商品</p>
<p class="step-cont-text">审核通过，商家登录后台,商家发布商品并上架</p>
</div>
</div>
<div class="doc-bg-con">
<p class="doc-title doc-title-mst">入驻必备材料</p>
<ul class="doc-ul-list">
<li>营业执照电子版</li>
<li>法人证件电子版</li>
</ul>
</div>
<div class="doc-bg-con">
<p class="doc-title doc-title-no-mst">入驻选填材料</p>
<div class="doc-ul-list-spe">
<ul class="doc-ul-list">
<li>品牌LOGO</li>
<li>其他行业资质</li>
</ul>
<!-- <ul style="width:0.8rem;height: 100%;"></ul>-->
<ul class="doc-ul-list">
<li>品牌授权（代理品需提供）</li>
<li>店铺LOGO</li>
</ul>
</div>
</div>
</div>
<!-- 品牌入驻 -->
<div class="mb-brand-con">
<p class="mb-brand-title">这些品牌都已入驻</p>
<div class="mb-brand-con-bg">
<p class="mb-brand-type">
<span class="mb-clothes" :class="{ 'light-word' : isLight === 0 }" @click="brandTypeChangeMB(0)">{{ detail_img1.type }}</span>
<span class="mb-electrical" :class="{ 'light-word' : isLight === 1 }" @click="brandTypeChangeMB(1)">{{ detail_img2.type }}</span>
<span class="mb-food" :class="{ 'light-word' : isLight === 2 }" @click="brandTypeChangeMB(2)">{{ detail_img3.type }}</span>
<span class="mb-maternal" :class="{ 'light-word' : isLight === 3 }" @click="brandTypeChangeMB(3)">{{ detail_img4.type }}</span>
</p>
<swiper class="mb-brand-con-swiper" :options="swiperBrandOptions" ref="brandSwiperDom">
<swiper-slide>
<div class="mb-img-con">
<img v-for="(item,index) in detail_img1.logo_urls" :key="index" :src="item.url" alt="">
</div>
</swiper-slide>
<swiper-slide>
<div class="mb-img-con">
<img v-for="(item,index) in detail_img2.logo_urls" :key="index" :src="item.url" alt="">
</div>
</swiper-slide>
<swiper-slide>
<div class="mb-img-con">
<img v-for="(item,index) in detail_img3.logo_urls" :key="index" :src="item.url" alt="">
</div>
</swiper-slide>
<swiper-slide>
<div class="mb-img-con">
<img v-for="(item,index) in detail_img4.logo_urls" :key="index" :src="item.url" alt="">
</div>
</swiper-slide>
</swiper>
</div>
</div>
<!-- 底部 -->
<div class="mb-footer">
<div class="mb-about-list">
<ul>
<li v-for="(footerItem,index) in footerMbList" :key="index" @click="goToUser(footerItem.id)">{{
footerItem.title }}
</li>
</ul>
<div class="mb-about-us">
<p>联系电话：{{settitle.contactTel}}</p>
<p>公司地址:{{settitle.companyAddress}}</p>
</div>
<p class="mb-about-gs">
{{settitle.bottomCopyright}}  <img class="icon-image" style="margin-right:4px;"
src="@/assets/image/national.png">{{settitle.recordNum}}
</p>
</div>
</div>
</div>
</div>
......@@ -296,19 +385,21 @@
<script>
import store from '@/store';
import {indexInfo, newsList, companyCounsel, webSite, getdomain, getallCloudList} from '@/api/webSite'
/** HACK
* 解决 swiper 轮播图不自动轮播问题
* */
import Swiper2, {Autoplay} from 'swiper';
Swiper2.use([Autoplay]);
/** 仅对官网进行 所有适配
* 当 可视区域 小于 960 时，进行 移动端适配
* 对 html 根目录 的font-size 进行设置
* */
//是否是移动端
;(function () {
/** HACK
* 解决 swiper 轮播图不自动轮播问题
* */
// import Swiper2, {Autoplay} from 'swiper';
//
// Swiper2.use([Autoplay]);
/** 仅对官网进行 所有适配
* 当 可视区域 小于 960 时，进行 移动端适配
* 对 html 根目录 的font-size 进行设置
* */
//是否是移动端
;
(function () {
// 获取屏幕区域的宽度
let w = document.documentElement.clientWidth
if (w < 961) {
......@@ -324,9 +415,9 @@
// htmlNode.style.fontSize = 32 + 'px'
// }
htmlNode.style.fontSize = w / 750 * 50 * 2 + 'px'
console.log("根html字体大小：",w, htmlNode.style.fontSize);
console.log("根html字体大小：", w, htmlNode.style.fontSize);
} else {
console.log("说明当前屏幕宽度大于960",w);
console.log("说明当前屏幕宽度大于960", w);
}
})();
......@@ -348,6 +439,7 @@
}
},
data() {
let _this = this;
return {
// 动态获取 sso 域名
ssourl: '',
......@@ -387,12 +479,42 @@
gwToken: '',
// banner 轮播设置参数
swiperOption: {
loop: true, // 循环模式选项
autoplay: {
delay: 4000,
disableOnInteraction: false
},
// 设定初始化时slide的索引
initialSlide: 0,
// Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
direction: 'horizontal',
// 一个屏幕展示的数量
slidesPerView: 1,
observer: true,
observeParents: true
},
// 核心优势 轮播循环设置参数
swiperADOption: {
loop: true, // 循环模式选项
pagination: {
el: '.swiper-pagination',
clickable: true,
// bulletClass:'my-bullet',
bulletActiveClass: 'my-bullet'
type: 'bullets'
// type: 'custom',
// renderCustom: function(swiper, current,total) {
// let customPaginationHtml = "";
// for (let i = 0; i < total; i++) {
// //判断哪个分页器此刻应该被激活
// if (i == current - 1) {
// customPaginationHtml +=
// '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
// } else {
// customPaginationHtml +=
// '<span class="swiper-pagination-customs"></span>';
// }
// }
// return '<span class="swiperPag">'+customPaginationHtml+'</span>';
// }
},
autoplay: {
delay: 4000,
......@@ -407,9 +529,27 @@
observer: true,
observeParents: true
},
// 核心优势 轮播循环设置参数
swiperADOption: {
loop: false,
swiperBrandOptions: {
loop: false, // 循环模式选项
// autoplay: {
// delay: 4000,
// disableOnInteraction: false
// },
autoplay: false,
// 设定初始化时slide的索引
initialSlide: 0,
// Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
direction: 'horizontal',
// 一个屏幕展示的数量
slidesPerView: 1,
observer: true,
observeParents: true,
//activeLoopIndex: 0,
on: {
slideChange: function() {
_this.isLight = this.activeIndex;
}
}
},
// logo
detail_img1: {
......@@ -467,6 +607,27 @@
],
// 移动端 相关
drawer: false,
footerMbList: [
{
id: 1, title: '企业简介'
},
{
id: 2, title: '发展历程'
},
{
id: 3, title: '荣誉资质'
},
{
id: 4, title: '团队介绍'
},
{
id: 5, title: '新闻动态'
},
{
id: 5, title: '联系我们'
}
],
brandIndex: 0,
}
},
created() {
......@@ -611,11 +772,16 @@
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isScroll = scrollTop > 100 ? true : false;
},
// 品牌类型切换
// 品牌类型切换 - PC端
brandTypeChange(index) {
this.$refs.cardShow.setActiveItem(index);
this.isLight = index;
},
/** 移动端 品牌logo类目的切换 */
brandTypeChangeMB(index) {
this.isLight = index;
this.$refs.brandSwiperDom.$swiper.slideTo(index,1000,false)
},
// 点击轮播图，切换，高点 品牌类别
brandCarChange() {
this.isLight = this.$refs.cardShow.activeIndex;
......@@ -670,32 +836,64 @@
/* 手机横屏和pc最小宽度为 812px */
/* 手机横屏 812px 为iphoneX 横屏的设备独立像素*/
//@media screen and (max-width: 811px) and (orientation: landscape) {
//@media screen and (max-width: 961px) and (orientation: landscape) {
// .pc-hide {
// display: none!important;
// display: none !important;
// }
// .mobile-show {
// display: none!important;
//
// .mobile-content {
// display: block!important;
// font-size: 0.16rem;
// }
//}
@media screen and (min-width: 750px) {
html {
font-size: 100px;
}
}
@media screen and (min-width: 640px) and (max-width: 749) {
html {
font-size: 85.333px;
}
}
@media screen and (min-width: 414px) and (max-width: 639) {
html {
font-size: 61.333px;
}
}
@media screen and (min-width: 375px) and (max-width: 413) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 320px) and (max-width: 374) {
html {
font-size: 42.6667px;
}
}
@media screen and (max-width: 961px) {
.pc-hide {
display: none !important;
}
.mobile-content {
display: block!important;
font-size: 0.16rem;
display: block !important;
}
}
@media screen and (min-width: 960px) {
//.pc-hide {
// display: block !important;
//}
.pc-hide {
display: block !important;
}
.mobile-content {
display: none!important;
display: none !important;
}
}
......@@ -751,7 +949,7 @@
}
.register-login-btn {
font-size :16px;
}
.nav > li {
......@@ -903,14 +1101,6 @@
-moz-text-align-last: center;
}
//.ad-details:after {
// content: '';
// display : inline-block;
// overflow : hidden;
// height:0;
// width: 100%;
//}
/* hover 时候的效果 class */
.mgT20 {
margin-top: 80px;
......@@ -1097,7 +1287,7 @@
}
.light-word {
color: #1966FF;
color: #1966FF!important;
}
.clothes {
......@@ -1278,10 +1468,9 @@
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%;
......@@ -1293,6 +1482,7 @@
.mb-menu-list-con > li {
margin: 5px 10px;
font-size: 0.32rem;
}
/* banner */
......@@ -1303,12 +1493,14 @@
.mb-banner-con img {
width: 100%;
height : 100%;
height: 100%;
}
/* 核心优势 */
.mb-advantage-con {
width: 100%;
}
.mb-ad-title {
height: 0.4rem;
line-height: 0.4rem;
......@@ -1319,52 +1511,57 @@
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.6rem);
height: 6.53rem;
width: calc(100% - 1rem);
height: 6.31rem;
overflow: hidden;
margin: 0.16rem 0.3rem;
margin: 0.16rem 0.5rem;
padding: 0.4rem 0 0;
background: #fff url("../../assets/image/website/adfooter.png") no-repeat bottom center;
background-size : contain;
background-size: contain;
border-radius: 8px;
box-shadow: 0 6px 18px 1px rgba(57, 124, 255, 0.26);
}
.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{
.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;
text-align: center;
}
.mb-ad-details {
......@@ -1380,33 +1577,231 @@
-ms-text-align-last: center;
-moz-text-align-last: center;
}
/*入驻流程*/
.mb-process-con {
background-color: #f9f9fa;
padding: 0.3rem 0;
padding: 0.1rem 0;
}
.mb-process-con-title {
height: 0.4rem;
line-height: 0.4rem;
height: 1.4rem;
line-height: 1.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;
justify-content: space-around;
flex-direction: row;
}
.mb-pre-process-con {
padding: 0.3rem;
padding: 0 0 0.3rem;
margin: 0.1rem 0.2rem;
background-color: #fff;
flex: 1;
}
.step-pic {
width: 0.9rem;
height: 0.64rem;
margin: 0.3rem auto;
}
.step-pic > img {
width: 100%;
height: 100%;
border: none;
}
.step-title {
text-align: center;
height: 0.3rem;
line-height: 0.2rem;
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
}
.step-cont-text {
width: 80%;
font-size: 0.26rem;
margin: 0.1rem auto 0;
text-align: center;
line-height: 0.36rem;
}
.doc-bg-con {
height: 2.15rem; // 设计高度215px
margin: 0.24rem 0.2rem;
padding: 0.32rem;
background: #fff url("../../assets/image/website/mate-bg.png") no-repeat 100%;
background-size: cover;
}
.doc-title {
font-size: 0.3rem;
height: 0.3rem;
line-height: 0.3rem;
text-indent: 0.3rem;
}
.doc-title-mst {
background: url("../../assets/image/website/setIn1.png") no-repeat 0 center;
background-size: 0.3rem 0.3rem;
}
.doc-title-no-mst {
background: url("../../assets/image/website/setIn2.png") no-repeat 0 center;
background-size: 0.3rem 0.3rem;
}
.doc-ul-list {
font-size: 0.26rem;
color: #666;
padding: 0.2rem 0.1rem;
}
.doc-ul-list > li {
background: url("../../assets/image/website/arrow.png") no-repeat 0 center;
background-size: 0.19rem 0.17rem;
text-indent: 0.24rem;
line-height: 0.44rem;
}
.doc-ul-list-spe {
display: flex;
justify-content: start;
flex-direction: row;
}
// 品牌入驻
.mb-brand-con-bg {
background: linear-gradient(0deg, #DEE8F9 46%, #FEFEFF 100%);
}
.mb-brand-title {
height: 1.4rem;
line-height: 1.4rem;
font-size: 0.4rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #000000;
text-align: center;
}
.mb-brand-type {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 0 auto 0.3rem;
height: 0.28rem;
line-height: 0.28rem;
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
}
.mb-clothes, .mb-electrical, .mb-food, .mb-maternal {
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
text-indent: 0.34rem;
}
.mb-clothes {
background: url("../../assets/image/website/clothes.png") no-repeat 0 center;
background-size : 0.32rem 0.32rem;
}
.mb-electrical {
background: url("../../assets/image/website/electrical.png") no-repeat 0 center;
background-size : 0.32rem 0.32rem;
}
.mb-food {
background: url("../../assets/image/website/food.png") no-repeat 0 center;
background-size : 0.32rem 0.32rem;
}
.mb-maternal {
background: url("../../assets/image/website/maternal.png") no-repeat 0 center;
background-size : 0.32rem 0.32rem;
}
.mb-brand-con-swiper {
width: 100%;
}
.mb-img-con {
padding: 0.2rem 0.3rem;
margin: 0.2rem 0.2rem;
background: #fff;
}
.mb-img-con > img {
width: 1.88rem;
height: 0.86rem;
margin: 0.1rem 0.14rem; // 0.1 0.1
}
// 移动端底部
.mb-footer {
background: #242A37;
padding: 0.16rem 0;
}
.mb-about-list {
font-size: 0.24rem;
font-weight: 400;
color: #FFFFFF;
line-height: 0.24rem;
}
.mb-about-list > ul {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.mb-about-list > ul > li {
flex: 33%;
text-align: center;
padding: 0.24rem 0;
}
.mb-about-us {
padding: 0.1rem 0 0.24rem;
border-bottom: 1px solid #5F5F5F;
}
.mb-about-us > p {
text-align: center;
font-size: 0.22rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 0.4rem;
}
.mb-about-gs {
text-align: center;
font-size: 0.14rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #959BA8;
line-height: 0.28rem;
padding: 0.3rem 0;
}
</style>
src/views/system/goodsimport/goodsgement.vue
浏览文件 @ ddf8e0e9
......@@ -511,10 +511,11 @@
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
cancelOnsale(id).then(res => {
console.log(510,res);
if (res.code == 1) {
done()
this.getList()
}else {
this.$message({type: 'error', message: res.message ? res.message : '操作失败'});
}
})
} else {
......@@ -527,14 +528,10 @@
message: '操作成功！'
});
});
//cancelOnsale().then();
},
editgoods(row) {//商品编辑
// this.editisOpen = true
let goodsId = Number(row.goods_id);
// let goodsParam = {
// goods_id: Number(row.goods_id)
// };
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论