appProduct

components.d.ts

@@ -29,8 +29,8 @@ declare module '@vue/runtime-core' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    Footer: typeof import('./src/components/pc/footer.vue')['default']
-    Header: typeof import('./src/components/pc/header.vue')['default']
+    Footer: typeof import('./src/components/mobile/footer.vue')['default']
+    Header: typeof import('./src/components/mobile/header.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']

src/assets/base.css

@@ -1,3 +1,25 @@
+html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
+header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
+table{border-collapse:collapse;border-spacing:0;}
+caption,th{text-align:left;font-weight:normal;}
+html,body,fieldset,img,iframe,abbr{border:0;}
+i,cite,em,var,address,dfn{font-style:normal;}
+[hidefocus],summary{outline:0;}
+li{list-style:none;}
+h1,h2,h3,h4,h5,h6,small{font-size:100%;}
+sup,sub{font-size:83%;}
+pre,code,kbd,samp{font-family:inherit;}
+q:before,q:after{content:none;}
+textarea{overflow:auto;resize:none;}
+label,summary{cursor:default;}
+a,button{cursor:pointer;}
+h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
+del,ins,u,s,a,a:hover{text-decoration:none;}
+body,textarea,input,button,select,keygen,legend{font:14px/1.14 'Microsoft YaHei',\5b8b\4f53;outline:0;}
+body{background:#fff;}
+a{text-decoration: none;}
+
+
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --vt-c-white: #ffffff;
@@ -87,3 +109,4 @@ body {
   background-color: #9f9f9f;
   -webkit-border-radius: 4px;
 }
+/* reset */

src/assets/main.css

@@ -1,4 +1,4 @@
-@import './base.css';
+@import './base.less';
 
 #app {
   /* margin: 0 auto;

src/components/pc/index.vue

@@ -138,7 +138,7 @@ function tabHandle(sub) {
     }
   }
   .pcMianPage{
-    padding: 30px 0;
+    padding: 30px;
     width: 972px;
     min-height: 676px;
     background: #fff;

src/i18n/modules/zh/manage.js

@@ -78,4 +78,38 @@ export default {
                 }
             ]
         },
+        "appProduct": {
+        "channel": "渠道：",
+        "useBtnText": "立即使用",
+        "toolsType": "工具类",
+        "serviceType": "服务类",
+        "sxz": {
+            "name": "随心装",
+            "desc": "随心装是一个3D室内装修设计平台，可直接编辑四维看看拍摄场景，支持绘制、家具设计、硬装设计等功能，并能快速渲染获得装修效果。"
+        },
+        "quanjing": {
+            "name": "四维全景",
+            "desc": "四维全景是一款综合VR制作应用。可上传全景图快速生成VR作品，基于全景图深入编辑拓展内容，也可融合四维看看及四维看见场景，丰富创作形式。"
+        },
+        "sketch": {
+            "name": "四维看看Sketch",
+            "desc": "快速打造线上3D空间模型，让人工智能真正服务于生活。支持用户自主上传全景图，拼接线上VR房源。"
+        },
+        "kanzhan4D": {
+            "name": "四维看展",
+            "desc": "四维看展支持用户在微信小程序中观看国内外博物馆、美术馆展览，包含文物介绍、博物馆游览、名人故居、四维艺术……"
+        },
+        "kandian": {
+            "name": "看店4Dkankan",
+            "desc": "看店4Dkankan，宅家中，云逛街，轻松买！在微信中搜索“看店4Dkankan”，打开小程序即可。"
+        },
+        "kanzhan": {
+            "name": "看房4Dkankan",
+            "desc": "轻便VR看房工具，功能轻便，实时分享，低成本高效率。"
+        },
+        "look": {
+            "name": "四维带看",
+            "desc": "四维带看是一款全新概念的VR远程营销利器，可通过VR场景，视频，图片，文字等同屏互动和重点标记的形式帮助商家/经纪人实现远程销售。"
+        }
+    }
     }

src/stores/config.ts

@@ -7,6 +7,7 @@ export const useConfigStore = defineStore('config', {
     return {
       isMobile: (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))?true:false,
       isEur: window.location.hostname.includes('eur'),
+      isTest: window.location.hostname.includes('test'),
     }
   },
   getters:{ // 相当于vue里面的计算属性，可以缓存数据

src/views/pc/appProduct/data.ts

@@ -0,0 +1,87 @@
+import { useConfigStore } from '@/stores/config'
+import quanjing from '@/assets/images/usercenter/quanjings-icon.png'
+import quanjingEn from '@/assets/images/usercenter/logo_4d_pano.png'
+import look from '@/assets/images/usercenter/look-icon.png'
+import lookEn from '@/assets/images/usercenter/logo_li-stream.png'
+import sketch from '@/assets/images/usercenter/sketch-icon.png'
+import sketchEn from '@/assets/images/usercenter/logo_4d_sketch.png'
+import sxz from '@/assets/images/usercenter/sxz-icon.png'
+import sxzEn from '@/assets/images/usercenter/logo_ai_staging.png'
+import kanzhan4D from '@/assets/images/usercenter/old-kanzhan.png'
+import kandian from '@/assets/images/usercenter/kandian.png'
+import kanzhan from '@/assets/images/usercenter/kanfang.png'
+import kanzhan4DIcon from '@/assets/images/usercenter/wechat.png'
+import kanzhan4DQr from '@/assets/images/usercenter/old-kanzhan-qr.png'
+import kandianQr from '@/assets/images/usercenter/kandian-qr.jpg'
+import kanzhanQr from '@/assets/images/usercenter/kanfang-qr.jpg'
+export const toolsList = (t:any) => {
+  const ConfigStore = useConfigStore()
+
+  return [{
+    img: quanjing,
+    enimg: quanjingEn,
+    name: t('manage.appProduct.quanjing.name'),
+    desc: t('manage.appProduct.quanjing.desc'),
+    link: '/panorama/material.html'
+  },{
+    img: look,
+    enimg: lookEn,
+    name: t('manage.appProduct.look.name'),
+    desc: t('manage.appProduct.look.desc'),
+    link: '/livestream-back/index.html'
+  },
+  {
+    img: sketch,
+    enimg: sketchEn,
+    name: t('manage.appProduct.sketch.name'),
+    desc: t('manage.appProduct.sketch.desc'),
+    link: 'https://sk.4dkankan.com'
+  },
+  {
+    img: sxz,
+    enimg: sxzEn,
+    name: t('manage.appProduct.sxz.name'),
+    desc: t('manage.appProduct.sxz.desc'),
+    link: ConfigStore.isTest ? 'https://testsxz.4dkankan.com' : 'https://sxz.4dkankan.com'
+
+  }]
+}
+
+export const serviceList = (t:any) => {
+  return [{
+    img: kanzhan4D,
+    name: t('manage.appProduct.kanzhan4D.name'),
+    desc: t('manage.appProduct.kanzhan4D.desc'),
+    channels: [
+      {
+        icon: kanzhan4DIcon,
+        name: t('manage.miniExe'),
+        qrCode: kanzhan4DQr
+      }
+    ]
+  },
+  {
+    img: kandian,
+    name: t('manage.appProduct.kandian.name'),
+    desc: t('manage.appProduct.kandian.desc'),
+    channels: [
+      {
+        icon: kanzhan4DIcon,
+        name: t('manage.miniExe'),
+        qrCode: kandianQr
+      }
+    ]
+  },
+  {
+    img: kanzhan,
+    name: t('manage.appProduct.kanzhan.name'),
+    desc: t('manage.appProduct.kanzhan.desc'),
+    channels: [
+      {
+        icon: kanzhan4DIcon,
+        name: t('manage.miniExe'),
+        qrCode: kanzhanQr
+      }
+    ]
+  }]
+}

src/views/pc/appProduct/index.vue

@@ -5,22 +5,205 @@ import { useUserStore } from '@/stores/user'
 import { openPay, getOrderInfo, wxLogin } from '@/api/api'
 import { useRoute } from 'vue-router'
 import { GetRequest, getWeChatCode, getRemark } from '@/utils/index'
+import { ElMessage } from "element-plus";
 import { useI18n } from 'vue-i18n'
+import { toolsList, serviceList } from './data'
 const route = useRoute()
 const { locale: language, t } = useI18n()
-const userStore = useUserStore();
-const isEur = userStore.isEur
+const tabs = [
+  {
+    name: t('manage.appProduct.toolsType'),
+    id: 'tools'
+  },
+  {
+    name: t('manage.appProduct.serviceType'),
+    id: 'service'
+  }
+]
+const activeTab = ref('tools')
+const showList = computed(()=> activeTab.value === 'tools' ? toolsList(t) : serviceList(t))
+
+function handleNoneLinkClick () {
+  ElMessage.warning(t('manage.unsx'));
+}
+// const userStore = useUserStore();
+// const isEur = userStore.isEur
 </script>
 <template>
-  <div class="pcPage">mobilePage
+  <div class="appProduct">
+    <div class="appProduct-header">
+      <ul class="tab-list">
+        <li
+          v-for="item in tabs"
+          :key="item.id"
+          @click="activeTab = item.id"
+          :class="{ active: activeTab === item.id }"
+        >
+          {{ item.name }}
+        </li>
+      </ul>
+    </div>
+    <div class="appProduct-content">
+      <el-row class="app-list" :gutter="20">
+        <el-col :span="12" v-for="item in showList" :key="item.name">
+          <div class="list-items">
+            <div class="app-info">
+              <img :src="item.enimg && language == 'en' ? item.enimg : item.img" />
+              <div class="app-info-right">
+                <h5>{{ item.name }}</h5>
+                <div class="channel" v-if="item.channels">
+                  <span>{{ $t('manage.appProduct.channel') }}</span>
+                  <ul class="channel-list">
+                    <li
+                      v-for="channel in item.channels"
+                      :key="channel.icon"
+                      :style="{ 'background-image': `url(${channel.icon})` }"
+                    >
+                      <img :src="channel.qrCode" style="width: 150px" alt="" />
+                    </li>
+                  </ul>
+                </div>
+                <div v-else-if="item.link">
+                  <a
+                    href="javascript:;"
+                    class="use-btn"
+                    v-if="item.link === 'none'"
+                    @click="handleNoneLinkClick"
+                    >{{ $t('manage.appProduct.useBtnText') }}</a
+                  >
+                  <a
+                    v-else
+                    class="use-btn"
+                    :href="`${item.link}?token=${token}&lang=${language}`"
+                    target="_blank"
+                    >{{ $t('manage.appProduct.useBtnText') }}</a
+                  >
+                </div>
+              </div>
+            </div>
+            <p class="app-desc">{{ item.desc }}</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
-.pcPage {
-  background: #f7f7f7;
-  max-width: 100vw;
-  display: block;
-  color:#202020;
+.appProduct {
+  padding: 30px 30px 384px;
+  background: #fff;
+  .tab-list {
+    display: inline-block;
+    position: relative;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 20px;
+    li {
+      display: inline-block;
+      margin-right: 30px;
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 1.5;
+      color: #909090;
+      font-weight: 600;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    .active {
+      color: #323233;
+      &::after {
+        content: '';
+        display: block;
+        width: 40px;
+        height: 2px;
+        background: #15bec8;
+      }
+    }
+  }
+  // .app-list {
+  //   display: flex;
+  //   flex-wrap: wrap;
+  // }
+  .list-items {
+    width: 448px;
+    min-height: 264px;
+    // overflow: hidden;
+    border: 1px solid #ebebeb;
+    padding: 20px;
+    margin-bottom: 22px;
+    .app-info {
+      display: flex;
+      border-bottom: 1px solid #ebebeb;
+      padding-bottom: 20px;
+      & > img {
+        width: 90px;
+        height: 90px;
+      }
+    }
+    .app-desc {
+      font-size: 14px;
+      color: #909090;
+      padding: 20px 0 0;
+      overflow: hidden;
+      line-height: 18px;
+    }
+    .app-info-right {
+      padding-left: 20px;
+      padding-top: 8px;
+      .channel {
+        margin-top: 12px;
+        display: flex;
+        align-items: center;
+        & > span {
+          font-size: 14px;
+          color: #909090;
+        }
+        & > ul {
+          display: flex;
+          align-items: center;
+          li {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            background-size: cover;
+            background-position: center center;
+            margin-left: 10px;
+            cursor: pointer;
+            position: relative;
+            img {
+              display: none;
+              width: 150px;
+              max-width: 150px;
+              position: absolute;
+              z-index: 1;
+              left: 0;
+              bottom: -0px;
+              transform: translateY(100%);
+            }
+            &:hover {
+              img {
+                display: block;
+              }
+            }
+          }
+        }
+      }
+      .use-btn {
+        padding: 0 24px;
+        height: 32px;
+        line-height: 32px;
+        background: #15bec8;
+        font-size: 14px;
+        color: #fff;
+        border-radius: 4px;
+        display: inline-block;
+        margin-top: 10px;
+        text-align: center;
+        width: 104px;
+      }
+    }
+  }
 }
 </style>