Skip to content

2
2025_fangtai_springfestival_h5
提交 cb481fd7 authored 作者: liudezheng's avatar liudezheng
浏览文件
操作

修复ios 首次加载图片不显示

上级 fd45ed63
隐藏空白字符变更
内嵌 并排
正在显示 包含 404 行增加 和 149 行删除
public/index.html
浏览文件 @ cb481fd7
...@@ -8,18 +8,19 @@ ...@@ -8,18 +8,19 @@
content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=no" content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=no"
/> />
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> --> <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
<title>活动即将上线，敬请期待</title> <title>尊享高端，礼遇11.11</title>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script> <script>
// VConsole 默认会挂载到 `window.VConsole` 上 // VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole(); // var vConsole = new window.VConsole();
// 接下来即可照常使用 `console` 等方法 // // 接下来即可照常使用 `console` 等方法
// 结束调试后，可移除掉 // // 结束调试后，可移除掉
vConsole.destroy(); // vConsole.destroy();
</script> </script>
</head> </head>
<body> <body>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<noscript> <noscript>
<strong <strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
......
src/router/index.js
浏览文件 @ cb481fd7
...@@ -10,7 +10,7 @@ const routes = [ ...@@ -10,7 +10,7 @@ const routes = [
name: "Home", name: "Home",
component: Home, component: Home,
meta: { meta: {
title: "活动即将上线，敬请期待", title: "尊享高端，礼遇11.11",
}, },
}, },
{ {
...@@ -22,13 +22,13 @@ const routes = [ ...@@ -22,13 +22,13 @@ const routes = [
component: () => component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"), import(/* webpackChunkName: "about" */ "../views/About.vue"),
meta: { meta: {
title: "活动即将上线，敬请期待", title: "尊享高端，礼遇11.11",
}, },
}, },
]; ];
const router = new VueRouter({ const router = new VueRouter({
mode: "hash", mode: "history",
base: process.env.NODE_ENV === "production" ? "/ft/website11/" : "/", base: process.env.NODE_ENV === "production" ? "/ft/website11/" : "/",
routes, routes,
}); });
......
src/views/About.vue
浏览文件 @ cb481fd7
<template> <template>
<div class="about"> <div class="about">
<wx-open-launch-weapp <img
id="launch-btn" class="head-img"
appid="wx6b79cb62d5aa1bdd" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/bm1.png"
username="gh_b537541d2a7" alt=""
path="/pages/productdetail/productdetail?id=792" srcset=""
@launch="sucFun" />
@error="errFun" <img class="title-img" src="@/assets/title-7.png" alt="" srcset="" />
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" <img
> class="b-g"
<script type="text/wxtag-template"> src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/bm2.png"
<button>跳转</button> alt=""
</script> srcset=""
</wx-open-launch-weapp> />
<img class="b-g" src="@/assets/7.png" alt="" srcset="" />
<van-field class="input" v-model="from.name" placeholder="请输入名字" />
<van-field
class="input"
v-model="from.phone"
placeholder="请输入电话"
type="number"
/>
<van-field class="input" v-model="from.address" placeholder="请输入地址" />
<div class="btn" @click="submit">立即报名</div>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import axios from "axios"; import axios from "axios";
import wx from "weixin-js-sdk";
export default { export default {
name: "Home", name: "About",
data() {
return {
from: {
name: "",
phone: "",
address: "",
},
current: 0,
};
},
components: {}, components: {},
async mounted() { async mounted() {
console.log(wx);
const urlLink = window.location.href; const urlLink = window.location.href;
let res = await axios({ let res = await axios({
method: "get", method: "get",
...@@ -36,10 +54,17 @@ export default { ...@@ -36,10 +54,17 @@ export default {
const { appId, signature, timestamp, nonceStr, url } = res.data.data; const { appId, signature, timestamp, nonceStr, url } = res.data.data;
// 分享数据写死 // 分享数据写死
let msg = { let msg = {
title: "方太双节惠购，你的厨房我来换", title: "方太双节惠购，你的厨房我来换", // 分享标题
desc: "晒厨房享免费换新！方太换新体验官全城火热招募", desc: "晒厨房享免费换新！方太换新体验官全城火热招募", // 分享描述
link: "https://faces.diaosaas.com/ft/website11/", link: url, // / 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名
imgUrl: "https://faces.diaosaas.com/ft/website/suolv.png?t=2023", imgUrl:
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/fenxiang.png", // 分享图标
success() {
console.log("分享接口调用成功");
},
fail() {
console.log("分享接口调用失败");
},
}; };
wx.config({ wx.config({
debug: false, debug: false,
...@@ -69,41 +94,109 @@ export default { ...@@ -69,41 +94,109 @@ export default {
"onMenuShareTimeline", "onMenuShareTimeline",
], // 需要检测的JS接口列表，所有JS接口列表见附录2, ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: (res) => { success: (res) => {
console.log(res, "成功"); console.log(res, "检测的JS接口列表===成功");
}, },
fail: (error) => { fail: (error) => {
console.log(error, "scanQRCode失败"); console.log(error, "scanQRCode失败");
}, },
}); });
wx.updateAppMessageShareData({ // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
title: msg.title, // 分享标题 wx.updateAppMessageShareData(msg);
desc: msg.desc, // 分享描述 // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
link: msg.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 wx.updateTimelineShareData(msg);
imgUrl: msg.imgUrl, // 分享图标 // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
}); wx.onMenuShareTimeline(msg);
wx.updateTimelineShareData({ // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
title: msg.title, // 分享标题 wx.onMenuShareAppMessage(msg);
link: msg.desc,
imgUrl: msg.link, // 分享图标
});
}); });
wx.error(function (err) { wx.error(function (err) {
console.log(err, "error"); console.log(err, "error");
}); });
}, },
methods: { methods: {
sucFun(msg) { async submit() {
console.log(msg); let { name, phone, address } = this.from;
}, var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
errFun(msg) { if (!name) {
console.log(msg); this.$toast("姓名不能为空");
return;
} else if (!phone) {
this.$toast("电话不能为空");
return;
} else if (!phoneReg.test(phone)) {
this.$toast("电话不正确");
return;
} else if (!address) {
this.$toast("地址不能为空");
return;
}
console.log("校验成功");
axios({
url: "https://faces.diaosaas.com/luck-draw/api/information/insertInformation",
method: "post",
data: {
name,
phone,
address,
type: 3,
},
}).then((res) => {
let data = res.data;
if (data.code == 200) {
this.$toast(data.msg);
this.from.name = "";
this.from.phone = "";
this.from.address = "";
} else {
this.$toast(data.msg);
}
});
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.about { .about {
width: 100vh; // height: 2312px;
height: 100vw; background: linear-gradient(180deg, #1d1212 0%, #c41a21 100%);
box-sizing: border-box;
padding: 0 0 50px 0;
img {
display: block;
}
.head-img {
width: 100%;
}
.title-img {
width: 620px;
margin: 48px auto 22px auto;
}
.b-g {
width: 700px;
margin: 60px auto 60px auto;
}
.input {
margin: 36px auto 0 auto;
box-sizing: border-box;
width: 700px;
height: 95px;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
opacity: 1;
padding: 24px;
}
.btn {
width: 700px;
height: 95px;
background: #000000;
border-radius: 50px;
margin: 52px auto 0 auto;
font-size: 28px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #ffffff;
line-height: 95px;
text-align: center;
}
} }
</style> </style>
src/views/Home.vue
浏览文件 @ cb481fd7
...@@ -22,25 +22,37 @@ ...@@ -22,25 +22,37 @@
path="/pages/productdetail/productdetail?id=792" path="/pages/productdetail/productdetail?id=792"
@launch="sucFun" @launch="sucFun"
@error="errFun" @error="errFun"
style="position: absolute; width: 100%; height: 100%" style="
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
border: none;
"
> >
<script type="text/wxtag-template"> <script type="text/wxtag-template">
<div style="position: absolute; top:0;left:0;right:0; <div style="position: absolute; top:0;left:0;right:0;
bottom:0;"> bottom:0;">
<img style="width:100%;height:100%;display:block" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp1.png" alt="" srcset="" /> <!-- <img style="width:100%;height:100%;display:block" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/1.png" alt="" srcset="" /> -->
<image style="width:100%;height:100%;" mode="aspectFill" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/1.png"></image>
</div> </div>
</script> </script>
</wx-open-launch-weapp> </wx-open-launch-weapp>
</div> </div>
<div class="one-text"> <!-- <div class="one-text">
定金膨胀：至方太展厅预交定金，即可锁定双11活动优惠价，方太全系指定产品定金至高享1111元膨胀优惠金 定金膨胀：至方太展厅预交定金，即可锁定双11活动优惠价，方太全系指定产品定金至高享1111元膨胀优惠金
<br /> <br />
（备注：特价及定价产品不参加，仅限含常规机的定价套餐参加） （备注：特价及定价产品不参加，仅限含常规机的定价套餐参加）
</div> </div> -->
<!-- 2222 --> <!-- 2222 -->
<img class="one" src="@/assets/5.png" alt="" srcset="" /> <img
@click="goLink"
class="one abc"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/2.png"
alt=""
srcset=""
/>
<!-- <div class="test"> <!-- <div class="test">
<wx-open-launch-weapp <wx-open-launch-weapp
v-if="true" v-if="true"
...@@ -60,9 +72,9 @@ ...@@ -60,9 +72,9 @@
</script> </script>
</wx-open-launch-weapp> </wx-open-launch-weapp>
</div> --> </div> -->
<div class="one-text"> <!-- <div class="one-text">
100%好礼：预定用户分享活动，即可参与11.11砸金蛋100%抽奖，100-1000元无门槛优惠券送不停，更有华为Mate60（使用权）、4999元免单、小天鹅10公斤滚筒洗衣机等幸运好礼！ 100%好礼：预定用户分享活动，即可参与11.11砸金蛋100%抽奖，100-1000元无门槛优惠券送不停，更有华为Mate60（使用权）、4999元免单、小天鹅10公斤滚筒洗衣机等幸运好礼！
</div> </div> -->
<!-- 33333 --> <!-- 33333 -->
<!-- <img class="one" src="@/assets/6.png" alt="" srcset="" /> --> <!-- <img class="one" src="@/assets/6.png" alt="" srcset="" /> -->
<div class="test"> <div class="test">
...@@ -74,22 +86,50 @@ ...@@ -74,22 +86,50 @@
path="/pages/productdetail/productdetail?id=793" path="/pages/productdetail/productdetail?id=793"
@launch="sucFun" @launch="sucFun"
@error="errFun" @error="errFun"
style="position: absolute; width: 100%; height: 100%" style="
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
border: none;
"
> >
<script type="text/wxtag-template"> <script type="text/wxtag-template">
<div style="position: absolute; top:0;left:0;right:0; <div style="position: absolute; top:0;left:0;right:0;
bottom:0;"> bottom:0;">
<img style="width:100%;height:100%;display:block" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp1.png" alt="" srcset="" /> <!-- <img style="width:100%;height:100%;display:block" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/3.png" alt="" srcset="" /> -->
<image style="width:100%;height:100%;" mode="aspectFill" src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/3.png"></image>
</div> </div>
</script> </script>
</wx-open-launch-weapp> </wx-open-launch-weapp>
</div> </div>
<img class="title-img" src="@/assets/title.png" alt="" srcset="" /> <img class="title-img" src="@/assets/title.png" alt="" srcset="" />
<img class="two" src="@/assets/2.png" alt="" srcset="" /> <img
<img class="two two-3" src="@/assets/3.png" alt="" srcset="" /> class="two"
<img class="title-img-2" src="@/assets/title-2.png" alt="" srcset="" /> src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/4.png"
alt=""
srcset=""
/>
<van-swipe
class="my-swipe-new"
:autoplay="3000"
indicator-color="#C4050F"
@change="onChange"
>
<van-swipe-item v-for="(item, i) in newList" :key="i"
><img class="image" :src="item" alt="" srcset=""
/></van-swipe-item>
</van-swipe>
<img
class="new-53"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/53.png"
alt=""
srcset=""
/>
<!-- <img class="two two-3" src="@/assets/3.png" alt="" srcset="" /> -->
<img class="title-img-2" src="@/assets/title-6.png" alt="" srcset="" />
<van-swipe <van-swipe
class="my-swipe-two" class="my-swipe-three"
:autoplay="3000" :autoplay="3000"
indicator-color="#C4050F" indicator-color="#C4050F"
@change="onChange" @change="onChange"
...@@ -98,8 +138,15 @@ ...@@ -98,8 +138,15 @@
><img class="image" :src="item" alt="" srcset="" ><img class="image" :src="item" alt="" srcset=""
/></van-swipe-item> /></van-swipe-item>
</van-swipe> </van-swipe>
<img class="title-img-3" src="@/assets/title-3.png" alt="" srcset="" /> <img class="title-img-3" src="@/assets/title-4.png" alt="" srcset="" />
<img class="one title-img-4" src="@/assets/4.png" alt="" srcset="" /> <img
@click="goAbout"
class="one title-img-4"
src="https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/7.png"
alt=""
srcset=""
/>
<img class="title-img-5" src="@/assets/title-5.png" alt="" srcset="" />
<van-field class="input" v-model="from.name" placeholder="请输入名字" /> <van-field class="input" v-model="from.name" placeholder="请输入名字" />
<van-field <van-field
class="input" class="input"
...@@ -114,26 +161,13 @@ ...@@ -114,26 +161,13 @@
/> />
<div class="btn" @click="submit">立即预约</div> <div class="btn" @click="submit">立即预约</div>
</div> </div>
<!-- <wx-open-launch-weapp
v-if="false"
id="launch-btn"
appid="wx6b79cb62d5aa1bdd"
username="gh_b537541d2a7"
path="/pages/productdetail/productdetail?id=792"
@launch="sucFun"
@error="errFun"
style="position: absolute; top: 0; left: 0; width: 100px; height: 100px"
>
<script type="text/wxtag-template">
<button>跳转小程序</button>
</script>
</wx-open-launch-weapp> -->
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import axios from "axios"; import axios from "axios";
import wx from "weixin-js-sdk"; var hasRefreshed = false;
// import wx from "weixin-js-sdk";
export default { export default {
name: "Home", name: "Home",
data() { data() {
...@@ -145,90 +179,121 @@ export default { ...@@ -145,90 +179,121 @@ export default {
}, },
current: 0, current: 0,
imgUrlList: [ imgUrlList: [
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/banner1_01.png", "https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/1banner1.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/banner1_01.png", "https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/1banner2.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/banner1_01.png",
], ],
starItem: [ starItem: [
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp1.png", "https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp1.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp2.png", "https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp2.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/huanzhuang/images/mxdp2.png", ],
newList: [
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/51.png",
"https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/52.png",
], ],
}; };
}, },
created() {},
components: {}, components: {},
async mounted() { mounted() {
const urlLink = window.location.href; if (this.isWechat() && this.isIOS() && !hasRefreshed) {
let res = await axios({ // 在微信浏览器且在iOS设备上执行强制刷新操作
method: "get", hasRefreshed = true;
url: "https://faces.diaosaas.com/ft/api/client/wx/getShareParameter", // this.$forceUpdate()
params: { // location.reload();
url: urlLink, }
}, this.wxmini();
}); },
console.log(res); methods: {
const { appId, signature, timestamp, nonceStr, url } = res.data.data; isWechat() {
// 分享数据写死 var userAgent = navigator.userAgent.toLowerCase();
let msg = { return userAgent.indexOf("micromessenger") !== -1;
title: "方太双节惠购，你的厨房我来换", // 分享标题 },
desc: "晒厨房享免费换新！方太换新体验官全城火热招募", // 分享描述 // 判断是否在iOS设备
link: "https://faces.diaosaas.com/ft/website11/", // / 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名 isIOS() {
imgUrl: "https://faces.diaosaas.com/ft/website/suolv.png?t=2023", // 分享图标 return /iphone|ipad|ipod/i.test(navigator.userAgent);
success() { },
console.log("分享接口调用成功"); async wxmini() {
}, const urlLink = window.location.href;
fail() { let res = await axios({
console.log("分享接口调用失败"); method: "get",
}, url: "https://faces.diaosaas.com/ft/api/client/wx/getShareParameter",
}; params: {
wx.config({ url: urlLink,
debug: false, },
appId, });
signature, console.log(res);
nonceStr, const { appId, signature, timestamp, nonceStr, url } = res.data.data;
timestamp, // 分享数据写死
jsApiList: [ let msg = {
"wx-open-subscribe", title: "方太双节惠购，你的厨房我来换", // 分享标题
"wx-open-launch-app", desc: "晒厨房享免费换新！方太换新体验官全城火热招募", // 分享描述
"chooseImage", link: "https://faces.diaosaas.com/ft/website11/", // / 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名
"previewImage", imgUrl:
"updateAppMessageShareData", "https://diaocloud-fangtai.oss-cn-beijing.aliyuncs.com/ft20231111/fenxiang.png", // 分享图标
"updateTimelineShareData", success() {
"onMenuShareAppMessage", console.log("分享接口调用成功");
"onMenuShareTimeline", },
], fail() {
openTagList: ["wx-open-launch-weapp"], //打开的标签名 console.log("分享接口调用失败");
}); },
wx.ready(function (res) { };
console.log(res, "ready"); wx.config({
wx.checkJsApi({ debug: false,
appId,
signature,
nonceStr,
timestamp,
jsApiList: [ jsApiList: [
"wx-open-subscribe",
"wx-open-launch-app",
"chooseImage",
"previewImage",
"updateAppMessageShareData", "updateAppMessageShareData",
"updateTimelineShareData", "updateTimelineShareData",
"onMenuShareAppMessage", "onMenuShareAppMessage",
"onMenuShareTimeline", "onMenuShareTimeline",
], // 需要检测的JS接口列表，所有JS接口列表见附录2, ],
success: (res) => { openTagList: ["wx-open-launch-weapp"], //打开的标签名
console.log(res, "检测的JS接口列表===成功");
},
fail: (error) => {
console.log(error, "scanQRCode失败");
},
}); });
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） wx.ready(function (res) {
wx.updateAppMessageShareData(msg); console.log(res, "ready");
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） wx.checkJsApi({
wx.updateTimelineShareData(msg); jsApiList: [
// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃） "updateAppMessageShareData",
wx.onMenuShareTimeline(msg); "updateTimelineShareData",
// 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃） "onMenuShareAppMessage",
wx.onMenuShareAppMessage(msg); "onMenuShareTimeline",
}); ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
wx.error(function (err) { success: (res) => {
console.log(err, "error"); console.log(res, "检测的JS接口列表===成功");
}); },
}, fail: (error) => {
methods: { console.log(error, "scanQRCode失败");
},
});
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.updateAppMessageShareData(msg);
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.updateTimelineShareData(msg);
// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareTimeline(msg);
// 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareAppMessage(msg);
});
wx.error(function (err) {
console.log(err, "error");
});
},
// 跳转外部链接
goLink() {
window.location.href =
"https://25920922-85.hd.webportal.top/25920922/3tP8fNyb0JjIO1HIcDFSww/load-25920922-85.html?style=2&editQrcode=true&_source=1";
},
// 跳转二级页面
goAbout() {
this.$router.push("/about");
console.log("报名");
},
async submit() { async submit() {
let { name, phone, address } = this.from; let { name, phone, address } = this.from;
var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/; var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
...@@ -333,6 +398,10 @@ export default { ...@@ -333,6 +398,10 @@ export default {
width: 700px; width: 700px;
margin: 0 auto; margin: 0 auto;
} }
.abc {
margin-top: 30px;
margin-bottom: 30px;
}
.test { .test {
position: relative; position: relative;
width: 700px; width: 700px;
...@@ -365,11 +434,15 @@ export default { ...@@ -365,11 +434,15 @@ export default {
} }
.title-img-3 { .title-img-3 {
width: 620px; width: 620px;
margin: 78px auto 26px auto; margin: 78px auto 66px auto;
} }
.title-img-4 { .title-img-4 {
margin-bottom: 76px; margin-bottom: 76px;
} }
.title-img-5 {
width: 620px;
margin: 86px auto 38px auto;
}
.input { .input {
margin: 36px auto 0 auto; margin: 36px auto 0 auto;
box-sizing: border-box; box-sizing: border-box;
...@@ -433,5 +506,93 @@ export default { ...@@ -433,5 +506,93 @@ export default {
} }
} }
} }
::v-deep .my-swipe-three {
width: 700px !important;
height: 382px !important;
margin: 0 auto;
// border: 1px solid #39a9ed;
.van-swipe-item {
color: #fff;
font-size: 20px;
text-align: center;
.image {
width: 700px;
height: 350px;
display: block;
// object-fit: cover;
border-radius: 22px;
}
}
.van-swipe__indicators {
bottom: 0;
.van-swipe__indicator {
width: 8px;
height: 8px;
background: #d8d8d8;
opacity: 1;
&:not(:last-child) {
margin-right: 8px;
}
}
.van-swipe__indicator--active {
transition: 0.5s width;
width: 32px;
height: 8px;
border-radius: 20px 20px 20px 20px;
opacity: 1;
}
.van-swipe__indicator:not(:last-child) {
}
}
}
::v-deep .my-swipe-new {
margin: 38px auto 0 auto;
width: 700px !important;
height: 350px !important;
border: 1px solid #fff;
border-bottom: none;
border-radius: 22px 22px 0 0;
box-sizing: border-box;
.van-swipe-item {
color: #fff;
font-size: 20px;
text-align: center;
.image {
width: 100%;
height: 100%;
display: block;
border-radius: 22px 22px 0 0;
object-fit: cover;
}
}
.van-swipe__indicators {
// right: 22px;
left: 90%;
transform: translateX(0);
bottom: 14px;
.van-swipe__indicator {
width: 8px;
height: 8px;
background: #d8d8d8;
opacity: 1;
&:not(:last-child) {
margin-right: 8px;
}
}
.van-swipe__indicator--active {
transition: 0.5s width;
width: 32px;
height: 8px;
border-radius: 20px 20px 20px 20px;
opacity: 1;
}
.van-swipe__indicator:not(:last-child) {
}
}
}
.new-53 {
width: 700px;
margin: 0 auto;
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论