|
|
@@ -0,0 +1,100 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="mobile-modal" v-if="showStoreInfo || showShare">
|
|
|
+ <div class="mobile-modal-box" v-if="showStoreInfo">
|
|
|
+ <div class="mobile-modal-header">联系方式</div>
|
|
|
+ <div class="mobile-modal-content">
|
|
|
+ <div>商家地址：深圳市南山区英唐大厦6楼</div>
|
|
|
+ <div class="content-line link-url">在线咨询</div>
|
|
|
+ <div>致电：<span class="content-line link-url">0755-96586323</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mobile-share-box" v-if="showShare">
|
|
|
+ <div class="share-area">
|
|
|
+ <ul>
|
|
|
+ <li class="share-item">
|
|
|
+ <img src="/images/mobile/@2x/share/weChat@2x.png" alt="">
|
|
|
+ <span>微信</span>
|
|
|
+ </li>
|
|
|
+ <li class="share-item">
|
|
|
+ <img src="/images/mobile/@2x/share/QQ@2x.png" alt="">
|
|
|
+ <span>QQ</span>
|
|
|
+ </li>
|
|
|
+ <li class="share-item">
|
|
|
+ <img src="/images/mobile/@2x/share/sina@2x.png" alt="">
|
|
|
+ <span>微博</span>
|
|
|
+ </li>
|
|
|
+ <li class="share-item">
|
|
|
+ <img src="/images/mobile/@2x/share/message@2x.png" alt="">
|
|
|
+ <span>短信</span>
|
|
|
+ </li>
|
|
|
+ <li class="share-item">
|
|
|
+ <img src="/images/mobile/@2x/share/email@2x.png" alt="">
|
|
|
+ <span>邮件</span>
|
|
|
+ </li>
|
|
|
+ <li class="share-item">
|
|
|
+ <img src="/images/mobile/@2x/share/flash@2x.png" alt="">
|
|
|
+ <span>刷新</span>
|
|
|
+ </li>
|
|
|
+ <li class="share-item">
|
|
|
+ <img src="/images/mobile/@2x/share/copylink@2x.png" alt="">
|
|
|
+ <span>复制链接</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="cancel-share" @click="showShare=false">取消</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mobile-header">
|
|
|
+ <a class="iconfont icon-fanhui" @click="goLastPage">返回</a>
|
|
|
+ <p>{{title}}</p>
|
|
|
+ <i class="iconfont icon-fenxiang" @click="showShare = !showShare"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ showStoreInfo: false,
|
|
|
+ showShare: false,
|
|
|
+ title: '优软商城'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goLastPage: function () {
|
|
|
+ window.history.back(-1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @import '~assets/scss/mobileCommon';
|
|
|
+ .mobile-header{
|
|
|
+ width:100%;
|
|
|
+ z-index:10000;
|
|
|
+ height:.88rem;
|
|
|
+ display:flex;
|
|
|
+ justify-content:space-around;
|
|
|
+ align-items:center;
|
|
|
+ border-bottom:.02rem solid #ccc;
|
|
|
+ background: #3e82f5;
|
|
|
+ padding:0 .2rem 0 .1rem;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .mobile-header p{
|
|
|
+ flex:1;
|
|
|
+ font-size:.36rem;
|
|
|
+ text-align: center;
|
|
|
+ margin-top:.2rem;
|
|
|
+ }
|
|
|
+ .mobile-header a{
|
|
|
+ font-size:.28rem;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .mobile-header a:last-child{
|
|
|
+ font-size:.4rem;
|
|
|
+ }
|
|
|
+</style>
|
yangc