提交 31ce206e authored 作者: 王鹏飞's avatar 王鹏飞

预览图片修改

上级 291a5cdd
<template> <template>
<div class="serv-box"> <div class="serv-box">
<img class="top-bar" src="../../assets/images/top-bar.png" alt=""> <img class="top-bar" src="../../assets/images/top-bar.png" alt />
<ul class="contact-info"> <ul class="contact-info">
<li> <li>
<img src="../../assets/images/ser-icon1.png" alt=""> <img src="../../assets/images/ser-icon1.png" alt />
<div class="txt"><span>客服微信:</span> 18610017891</div> <div class="txt">
<span>客服微信:</span> 18610017891
</div>
</li> </li>
<li> <li>
<img src="../../assets/images/ser-icon2.png" alt=""> <img src="../../assets/images/ser-icon2.png" alt />
<div class="txt"><span>客服电话:</span> 18610017891</div> <div class="txt">
<span>客服电话:</span> 18610017891
</div>
</li> </li>
<li> <li>
<img src="../../assets/images/ser-icon3.png" alt=""> <img src="../../assets/images/ser-icon3.png" alt />
<div class="txt"><span>工作时间:</span> 工作日9:00-12:00,13:00-18:00</div> <div class="txt">
<span>工作时间:</span> 工作日9:00-12:00,13:00-18:00
</div>
</li> </li>
</ul> </ul>
<div class="code"> <div class="code">
<div class="txt">想了解更多,保存二维码图片,扫码关注我们</div> <div class="txt">想了解更多,保存二维码图片,扫码关注我们</div>
<img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/d720ec7c4eed91788de652fb7962a911.png" alt=""> <img
@click="imagePreview"
src="https://zws-imgs-pub.ezijing.com/static/public/d720ec7c4eed91788de652fb7962a911.png"
alt
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -32,52 +42,55 @@ export default { ...@@ -32,52 +42,55 @@ export default {
}, },
methods: { methods: {
imagePreview() { imagePreview() {
ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/d720ec7c4eed91788de652fb7962a911.png']) // ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/d720ec7c4eed91788de652fb7962a911.png'])
wx.previewImage({
urls: ['https://zws-imgs-pub.ezijing.com/static/public/d720ec7c4eed91788de652fb7962a911.png']
})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-bar{ .top-bar {
width: 100%; width: 100%;
display: block; display: block;
} }
.contact-info{ .contact-info {
padding-left: .7rem; padding-left: 0.7rem;
padding-top: .2rem; padding-top: 0.2rem;
li{ li {
display: flex; display: flex;
margin-bottom: .48rem; margin-bottom: 0.48rem;
img{ img {
width: .5rem; width: 0.5rem;
height: .5rem; height: 0.5rem;
display: block; display: block;
} }
.txt{ .txt {
margin-left: .3rem; margin-left: 0.3rem;
line-height: .5rem; line-height: 0.5rem;
font-size:.3rem; font-size: 0.3rem;
color:rgba(34,34,34,1); color: rgba(34, 34, 34, 1);
span{ span {
font-weight:bold; font-weight: bold;
} }
} }
} }
} }
.code{ .code {
margin-top: .84rem; margin-top: 0.84rem;
.txt{ .txt {
text-align: center; text-align: center;
font-weight:bold; font-weight: bold;
color:rgba(34,34,34,1); color: rgba(34, 34, 34, 1);
line-height:100%; line-height: 100%;
font-size: .3rem; font-size: 0.3rem;
} }
img{ img {
width: 4.3rem; width: 4.3rem;
display: block; display: block;
margin: .25rem auto; margin: 0.25rem auto;
} }
} }
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论