应用市场调整移动端图片大小，将接口连接放在public

2020/appstore/public/index.html

@@ -28,5 +28,6 @@
      <div class="initgif"></div>
    </div>
    <!-- built files will be auto injected -->
    <script src="service-config.js"></script>
  </body>
</html>

2020/appstore/public/service-config.js

@@ -0,0 +1 @@
window.servicePath = '/display/getAppType';

2020/appstore/src-new/App.vue

@@ -1,25 +0,0 @@
<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
  export default {
    name: 'App',
    created() {
    },
    computed: {},
  };
</script>
<style>
  #app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    font-family: PingFangSC, "微软雅黑", Arial, Helvetica, sans-serif;
  }
</style>

2020/appstore/src-new/assets/img/app-down-android.svg

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609745206181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1786" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M229.493567 343.057721h565.073089v409.938453a67.449841 67.449841 0 0 1-67.02828 67.750957h-46.311543v139.717528a63.414895 63.414895 0 1 1-126.82979 0v-139.717528H469.602957v139.717528c0 35.049828-28.42529 63.354672-63.535341 63.354672a63.234226 63.234226 0 0 1-62.752442-63.354672l-0.542007-139.717528h-45.588866a67.570287 67.570287 0 0 1-67.690734-67.750957V343.057721z m-87.443901-11.683276a63.234226 63.234226 0 0 0-63.414895 62.752441v264.740626c0 35.110051 28.365067 63.354672 63.414895 63.354672s62.752441-28.304844 62.752442-63.354672V394.126886c0-34.387374-28.184398-62.752441-62.752442-62.752441z m654.323682-10.478815H227.024422c0-97.862493 58.536826-182.837248 145.318273-227.101206L328.560522 13.215953a8.973238 8.973238 0 0 1 3.071376-12.34573c4.275838-1.866915 9.876584-0.662454 12.34573 3.733831l44.263958 81.240925c37.63942-16.681791 79.494456-25.895921 123.758414-25.895922s86.118993 9.21413 123.758414 25.835698L680.022372 4.543831c2.469146-4.336061 8.069892-5.540523 12.34573-3.733831a8.973238 8.973238 0 0 1 3.071376 12.34573l-43.782173 80.578471c86.23944 44.324181 144.716043 129.298936 144.716043 227.161429zM406.067616 194.126063a23.968783 23.968783 0 0 0-23.90856-24.029006 23.90856 23.90856 0 0 0-23.426775 24.029006c0 12.887737 10.418592 23.968783 23.426775 23.968782a23.90856 23.90856 0 0 0 23.90856-23.968782z m259.200103 0a23.90856 23.90856 0 0 0-23.426775-24.029006 23.968783 23.968783 0 0 0 0 47.997788 23.788114 23.788114 0 0 0 23.426775-23.968782z m216.682615 137.248382a62.631995 62.631995 0 0 0-62.752442 62.752441v264.740626a63.053557 63.053557 0 1 0 126.167337 0V394.126886a62.872888 62.872888 0 0 0-63.414895-62.752441z" p-id="1787" fill="#FFFFFF"></path></svg>

2020/appstore/src-new/assets/img/app-down-iOS.svg

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609746029473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3098" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M798.293333 832C762.88 884.906667 725.333333 936.533333 668.16 937.386667 610.986667 938.666667 592.64 903.68 527.786667 903.68 462.506667 903.68 442.453333 936.533333 388.266667 938.666667 332.373333 940.8 290.133333 882.346667 254.293333 830.72 181.333333 725.333333 125.44 531.2 200.533333 400.64 237.653333 335.786667 304.213333 294.826667 376.32 293.546667 430.933333 292.693333 482.986667 330.666667 516.693333 330.666667 549.973333 330.666667 613.12 285.013333 679.253333 291.84 706.986667 293.12 784.64 302.933333 834.56 376.32 830.72 378.88 741.973333 430.933333 742.826667 538.88 744.106667 667.733333 855.893333 710.826667 857.173333 711.253333 855.893333 714.24 839.253333 772.693333 798.293333 832M554.666667 149.333333C585.813333 113.92 637.44 87.04 680.106667 85.333333 685.653333 135.253333 665.6 185.6 635.733333 221.44 606.293333 257.706667 557.653333 285.866667 509.866667 282.026667 503.466667 232.96 527.36 181.76 554.666667 149.333333Z" p-id="3099" fill="#FFFFFF"></path></svg>

2020/appstore/src-new/assets/img/app-down-qrcode.svg

@@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1609742906737" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2510" data-spm-anchor-id="a313x.7781069.0.i1" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M448.443475 67.101257l63.554478 0 0 63.558571-63.554478 0 0-63.558571Z" p-id="2511" data-spm-anchor-id="a313x.7781069.0.i7" class="selected" fill="#ffffff"></path><path d="M448.443475 448.441429 67.103304 448.441429 67.103304 512 130.657782 512 130.657782 575.558571 194.216353 575.558571 194.216353 512 257.770831 512 257.770831 575.558571 511.997953 575.558571 511.997953 512 448.443475 512Z" p-id="2512" data-spm-anchor-id="a313x.7781069.0.i8" class="selected" fill="#ffffff"></path><path d="M766.228145 575.558571 766.228145 448.441429 702.669574 448.441429 702.669574 575.558571 639.111003 575.558571 639.111003 512 575.556525 512 575.556525 639.113049 448.443475 639.113049 448.443475 766.226099 575.556525 766.226099 575.556525 702.671621 639.111003 702.671621 639.111003 639.113049 829.782623 639.113049 829.782623 575.558571Z" p-id="2513" data-spm-anchor-id="a313x.7781069.0.i11" class="selected" fill="#ffffff"></path><path d="M829.782623 448.441429 829.782623 512 893.341195 512 893.341195 575.558571 956.896696 575.558571 956.896696 512 956.896696 448.441429 893.341195 448.441429Z" p-id="2514" data-spm-anchor-id="a313x.7781069.0.i13" class="selected" fill="#ffffff"></path><path d="M829.782623 639.113049l127.113049 0 0 63.558571-127.113049 0 0-63.558571Z" p-id="2515" data-spm-anchor-id="a313x.7781069.0.i14" class="selected" fill="#ffffff"></path><path d="M448.443475 829.78467 448.443475 893.340171 448.443475 956.898743 511.997953 956.898743 511.997953 893.340171 575.556525 893.340171 639.111003 893.340171 639.111003 956.898743 702.669574 956.898743 702.669574 893.340171 702.669574 829.78467 766.228145 829.78467 766.228145 893.340171 766.228145 956.898743 893.341195 956.898743 956.896696 956.898743 956.896696 766.226099 893.341195 766.226099 893.341195 893.340171 829.782623 893.340171 829.782623 766.226099 766.228145 766.226099 766.228145 702.671621 702.669574 702.671621 702.669574 766.226099 575.556525 766.226099 575.556525 829.78467Z" p-id="2516" data-spm-anchor-id="a313x.7781069.0.i12" class="selected" fill="#ffffff"></path><path d="M384.884904 67.101257 67.103304 67.101257l0 317.785693 317.7816 0L384.884904 67.101257zM321.329403 321.328379 130.657782 321.328379 130.657782 130.659829l190.671621 0L321.329403 321.328379z" p-id="2517" data-spm-anchor-id="a313x.7781069.0.i5" class="selected" fill="#ffffff"></path><path d="M194.216353 194.214307l63.554478 0 0 63.558571-63.554478 0 0-63.558571Z" p-id="2518" data-spm-anchor-id="a313x.7781069.0.i6" class="selected" fill="#ffffff"></path><path d="M67.103304 956.898743l317.7816 0L384.884904 639.113049 67.103304 639.113049 67.103304 956.898743zM130.657782 702.671621l190.671621 0 0 190.668551L130.657782 893.340171 130.657782 702.671621z" p-id="2519" data-spm-anchor-id="a313x.7781069.0.i9" class="selected" fill="#ffffff"></path><path d="M194.216353 766.226099l63.554478 0 0 63.558571-63.554478 0 0-63.558571Z" p-id="2520" data-spm-anchor-id="a313x.7781069.0.i10" class="selected" fill="#ffffff"></path><path d="M639.111003 67.101257l0 317.785693 317.785693 0L956.896696 67.101257 639.111003 67.101257zM893.341195 321.328379 702.669574 321.328379 702.669574 130.659829l190.671621 0L893.341195 321.328379z" p-id="2521" data-spm-anchor-id="a313x.7781069.0.i2" class="selected" fill="#ffffff"></path><path d="M766.228145 194.214307l63.554478 0 0 63.558571-63.554478 0 0-63.558571Z" p-id="2522" data-spm-anchor-id="a313x.7781069.0.i3" class="selected" fill="#ffffff"></path><path d="M575.556525 384.886951 575.556525 321.328379 511.997953 321.328379 511.997953 257.772878 575.556525 257.772878 575.556525 130.659829 511.997953 130.659829 511.997953 194.214307 448.443475 194.214307 448.443475 384.886951 511.997953 384.886951 511.997953 448.441429 511.997953 512 575.556525 512 575.556525 448.441429Z" p-id="2523" data-spm-anchor-id="a313x.7781069.0.i0" class="selected" fill="#ffffff"></path></svg>

2020/appstore/src-new/components/AppDownload.vue

@@ -1,110 +0,0 @@
<template>
  <div class="black-sheild">
    <div class="download-card">
      <div v-show="isShow(apkType)" class="splitline"></div>
      <div @click="closeDownload" class="close-card">×</div>
      <template v-for="apk in apkType">
        <div class="download-item" :key="apk.APK_ID">
          <app-qr class="download-qrcode"
                  :margin="0"
                  :text="apk.APK_URL"
                  :size="176">
          </app-qr>
          <div class="download-type">{{apk.APK_TYPE}} 版扫描下载</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
  import vueQr from 'vue-qr';
  export default {
    name: 'Download',
    props: ['apkType'],
    components: {
      'app-qr': vueQr,
    },
    created() {
      console.log("down", this.apkType);
    },
    methods: {
      isShow(apkType) {
        return apkType.length === 2;
      },
      closeDownload() {
        this.$emit("onDownClose");
      },
    },
  };
</script>
<style>
  .black-sheild {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);;
    position: fixed;
    top: 0;
    left: 0;
  }
  .download-card {
    width: 673px;
    height: 378px;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #FFFFFF;
    border-radius: 8px;
    margin-left: -336.5px;
    margin-top: -189px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .splitline {
    position: absolute;
    left: 50%;
    width: 1px;
    height: 298px;
    margin: 0px auto;
    padding: 0px;
    overflow: hidden;
    background: #000000;
    opacity: 0.09;
  }
  .close-card {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 22px;
    line-height: 22px;
    cursor: pointer;
    opacity: .65;
    transition: opacity .2s ease-in-out;
  }
  .close-card:hover {
    opacity: .95;
  }
  .download-qrcode {
    width: 176px;
    height: 176px;
    margin: 0 80px;
  }
  .download-type {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    opacity: .65;
    line-height: 22px;
    margin-top: 20px;
  }
</style>

2020/appstore/src-new/components/AppSearch.vue

@@ -1,60 +0,0 @@
<template>
  <div class="app-search">
    <el-autocomplete
      :fetch-suggestions="querySearchAsync"
      v-model="value"
      placeholder="请输入搜索内容"
      @select="handleSelect"
    >
      <i
        class="el-input__icon el-icon-search"
        slot="suffix"
        @click="handleIconClick"></i>
    </el-autocomplete>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      appname: [],
      timeout: null,
    };
  },
  methods: {
    querySearchAsync() {
    },
    handleSelect() {
    },
    handleIconClick() {
    },
  },
};
</script>
<style>
.app-search {
  width: 200px;
  margin: auto 0;
}
/* 自定义搜索框样式 */
.el-input__inner {
  width: 200px;
  height: 32px;
  color: #000000;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 22px;
  border: 1px solid #000000;
  padding: 0 12px;
  background-color: #FFFFFF;
}
.el-icon-search {
  line-height: 32px;
  cursor: pointer;
}
</style>

2020/appstore/src-new/main.js

@@ -1,24 +0,0 @@
import Vue from 'vue';
import {
  Autocomplete,
  Row,
  Col,
} from 'element-ui';
import App from './App.vue';
import router from './router';
import store from './store';
import axios from 'axios';
Vue.config.productionTip = false;
Vue.prototype.$http = axios;
Vue.use(Autocomplete);
Vue.use(Row);
Vue.use(Col);
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

2020/appstore/src-new/router/index.js

@@ -1,33 +0,0 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Frame from '../views/Frame.vue';
Vue.use(VueRouter);
const routes = [
  {
    path: '',
    name: 'Frame',
    component: Frame,
    children: [
      {
        path: '/',
        name: 'Home',
        component: Home
      }, {
        path: '/detail',
        name: 'Detail',
        component: () => import(/* webpackChunkName: "New" */ '../views/Detail.vue'),
      }
    ]
  }
];
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes,
});
export default router;

2020/appstore/src-new/store/index.js

@@ -1,52 +0,0 @@
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  // use Mutation to change state
  strict: true,
  state: {
    appData: null,      // 数据结果集共享
    appType: null,      // 当前
  },
  getters: {
    appList: (state) => {
      let appData = state.appData;
      console.log("appList", appData, state.appType);
      if (appData && state.appType) {
        let list = appData.find(item => item.APP_CATALOG_ID == state.appType)['APP_LIST'];
        console.log("store list", list);
        return list;
      } else {
        return [];
      }
    },
    appType: state => state.appType,
    appTypeName: state => {
      let appData = state.appData;
      if (appData && state.appType) {
        let name = appData.find(item => item.APP_CATALOG_ID == state.appType).CATALOG_NAME;
        return name;
      } else {
        return "";
      }
    }
  },
  mutations: {
    // 加载动画
    setAppData(state, data) {
      console.log("setData", data);
      state.appData = data;
      if (state.appType == null && data[0]) {     // 设置默认参数
        state.appType = data[0].APP_CATALOG_ID;
      }
    },
    setAppType(state, type) {
      console.log("setType", type);
      state.appType = type;
    }
  },
  actions: {},
});

2020/appstore/src-new/views/Detail.vue

@@ -1,261 +0,0 @@
<template>
  <div class="app-detail">
    <div class="catalog">
      <div class="main-content">
        <div class="front-catalog">{{appTypeName}}<span>></span></div>
        <div class="current-catalog">{{appInfo.APP_NAME}}</div>
      </div>
    </div>
    <div class="app-detail-body">
      <div class="main-content">
        <div class="app-detail-left">
          <img :src="appInfo.APP_LOGO_URL" class="app-detail-logo">
          <div class="app-detail-info">
            <div class="app-detail-name">{{appInfo.APP_NAME}}</div>
            <div class="app-detail-type">类型：</div>
            <div class="app-detail-version"><span>版本：</span>
              <template v-for="v in appInfo.APP_INFO">
                <span :key="v.APK_TYPE" :class="v.APK_TYPE">
                  {{v.APK_TYPE}}版本: {{v.APK_VERSION}}
                  <span v-if="appInfo.APP_INFO.length === 2" class="version-line">|</span>
                </span>
              </template>
            </div>
            <div class="app-detail-size">大小：</div>
            <div class="app-detail-update">
              更新：{{formatChange(appInfo.CREATE_DATE)}}
            </div>
          </div>
        </div>
        <div class="app-down-info">
          <template v-for="v in appInfo.APP_INFO">
            <div :key="v.APK_TYPE" :href="v.APK_URL" :class="v.APK_TYPE">
              <a><span class="app-down-type"></span>{{changeLang(v.APK_TYPE)}}版下载</a>
              <span class="app-down-qrcode"><span class="app-down-qrcode-body"></span></span>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="app-detail-preview">
      <div class="main-content">
        <template v-for="(url, index) in getAppPreview(appInfo)">
          <img :src="appInfo[url]" :key="index" class="app-preview-img">
        </template>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Detail',
    data() {
      return {
        showDownCard: false,
      };
    },
    computed: {
      appInfo: function f() {
        let appInfo = this.$store.getters.appList.find(item => item.APP_ID == this.$route.query.appID);
        console.log('appInfo', appInfo);
        if (appInfo) {
          return appInfo;
        } else {
          return {};
        }
      },
      appTypeName: function () {
        return this.$store.getters.appTypeName;
      }
    },
    created() {
      console.log(this.$route.query.appID);
      let appInfo = this.$store.getters.appList.find(item => item.APP_ID == this.$route.query.appID);
      console.log('appInfo', appInfo);
      if (appInfo) {
        this.appInfo = appInfo;
      }
    },
    methods: {
      sortApkType(apkType) {
        let sortResult = [];
        if (apkType.length === 1) {
          sortResult = [...apkType];
        } else if (apkType[0].APK_TYPE === 'iOS') {
          sortResult = [...apkType];
        } else {
          sortResult = [apkType[1], apkType[0]];
        }
        return sortResult;
      },
      formatChange(e) {
        const str = String(e);
        return str.substring(0, 10).split('-').join('/');
      },
      getAppPreview(app) {
        const appPreview = [];
        Object.keys(app).forEach((el) => {
          if (/APP_PREVIEW\d_URL/.test(el) && app[el] !== null) {
            console.log(el);
            appPreview.push(el);
          }
        });
        return appPreview;
      },
      changeLang(e) {
        if (e === 'iOS') return '苹果';
        if (e === 'android') return '安卓';
        return 0;
      },
    },
  };
</script>
<style>
  .catalog {
    height: 40px;
    background: #f5f5f5;
  }
  .catalog .main-content {
    justify-content: flex-start;
  }
  .catalog .main-content div {
    line-height: 40px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .front-catalog {
    opacity: .65;
  }
  .front-catalog span {
    margin: 0 10px;
  }
  .app-detail-body .main-content {
    padding-top: 50px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e8e8e8;
    align-items: flex-end;
  }
  .app-detail-left {
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }
  .app-detail-logo {
    width: 130px;
    height: 130px;
  }
  .app-detail-info {
    font-family: PingFangSC-Regular, PingFang SC;
    margin-left: 23px;
  }
  .app-detail-info .app-detail-name {
    font-size: 24px;
    opacity: .85;
    line-height: 24px;
    margin-bottom: 22px;
  }
  .app-detail-info div {
    font-size: 14px;
    line-height: 20px;
    opacity: .45;
  }
  .android .version-line {
    display: none;
  }
  .app-down-info div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
    width: 153px;
    height: 32px;
    border-radius: 4px;
    margin-top: 8px;
  }
  .app-down-info a {
    width: 121px;
    height: 100%;
    text-align: left;
    text-decoration: none;
    line-height: 32px;
    display: flex;
    align-items: center;
  }
  .app-down-info .android {
    background: #FF7404;
  }
  .app-down-info .iOS {
    background: #19BB21;
  }
  .app-down-info a span {
    width: 18px;
    height: 18px;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .app-down-info a span {
    margin: 0 7px 0 16px;
  }
  .app-down-info .android a span {
    background-image: url(../assets/img/app-down-android.svg);
  }
  .app-down-info .iOS a span {
    background-image: url(../assets/img/app-down-iOS.svg);
  }
  .app-down-qrcode {
    width: 31px;
    height: 100%;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../assets/img/app-down-qrcode.svg);
  }
  .app-down-qrcode-body {
    width: 100%;
    height: 100%;
    opacity: .09;
    border-left: 1px solid #000000;
  }
  .app-detail-preview {
    padding: 28px 0;
  }
  .app-detail-preview .main-content {
    width: 990px;
    justify-content: flex-start;
  }
  .app-preview-img {
    width: 217px;
    height: auto;
    margin: 0 15px;
  }
</style>

2020/appstore/src-new/views/Frame.vue

@@ -1,146 +0,0 @@
<template>
  <div>
    <div class="app-head">
      <div class="main-content">
        <div class="app-logo">{{appTitle}}</div>
        <app-search></app-search>
      </div>
    </div>
    <!-- 框架页部分 -->
    <div class="app-nav">
      <div class="main-content">
        <template v-for="appType in appTypes">
          <div class="app-nav-item" :class="{active: isActive(appType.APP_CATALOG_ID)}"
               :key="appType.APP_CATALOG_ID">
            <router-link :to="{ name: 'Home', query: { appTypeId: appType.APP_CATALOG_ID }}">
              {{appType.CATALOG_NAME}}
            </router-link>
          </div>
        </template>
      </div>
    </div>
    <router-view/>
  </div>
</template>
<script>
  export default {
    name: 'App',
    components: {
      'app-search': () => import('../components/AppSearch.vue'),
    },
    created() {
      let appType = this.$route.query.appTypeId;
      if (appType) {
        this.$store.commit('setAppType', appType);
      }
      this.$http.get('/display/getAppType').then((res) => {
        this.appTypes = res.data.APP_TYPE;
        this.$store.commit('setAppData', res.data.APP_TYPE);
      });
    },
    data() {
      return {
        appTypes: [],
        appTitle: 'IPU App Store'
      }
    },
    computed: {
      appTypeId: function () {
        return this.$store.getters.appType;
      }
    },
    methods: {
      isActive(appType) {
        return this.appTypeId == appType;
      }
    },
    beforeRouteUpdate(to, from, next) {  // 进入之前，更新state信息
      if (to.query.appTypeId) {
        this.$store.commit('setAppType', to.query.appTypeId);
      }
      next();
    }
  };
</script>
<style>
  html,
  body {
    position: relative;
  }
  html {
    overflow-x: hidden;
    overflow-y: scroll;
  }
  body {
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
  }
  .main-content {
    width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
  .app-head {
    height: 60px;
    background: #1F2230;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 28px;
  }
  .app-logo {
    width: 180px;
    height: 100%;
    background: url('../assets/img/logo.png') center left/auto 32px no-repeat;
    text-align: right;
    line-height: 60px;
  }
  .app-nav {
    height: 40px;
    background: #3A4556;
  }
  /* 定制菜单 */
  .app-nav .app-nav-item {
    height: 38px;
    color: #FFFFFF;
    font-family: PingFangSC-Regular, PingFang SC;
    line-height: 1;
    flex: 1;
    transition: background .2s ease-in-out;
  }
  .app-nav .app-nav-item.active {
    color: #19BB21;
    border-bottom: 2px solid #19BB21;
  }
  .app-nav .app-nav-item:hover {
    background-color: #424c58;
  }
  .app-nav .app-nav-item.active:hover {
    background-color: transparent;
  }
  .app-nav .app-nav-item a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    width: 100%;
    line-height: 40px;
  }
</style>

2020/appstore/src-new/views/Home.vue

@@ -1,171 +0,0 @@
<template>
  <div>
    <div class="app-list">
      <el-row :gutter="49.5">
        <el-col :span="8" :key=app.APP_ID v-for="app in appList">
          <div class="app-item" @click="toAppDetail(app.APP_ID)">
            <div class="main-content">
              <img class="app-img" :src="app.APP_LOGO_URL">
              <div class="app-info">
                <div class="app-name">
                  {{app.APP_NAME}}
                </div>
                <div class="main-content">
                  <div class="app-version">
                    <div :title="v.APK_VERSION" :key="v.APK_TYPE"
                         v-for="v in sortApkType(app.APP_INFO)">
                      {{v.APK_TYPE}}版本: {{v.APK_VERSION}}
                    </div>
                  </div>
                  <a class="app-download"
                     :active="isActive"
                     @click.stop="toDownload(app)">下载</a>
                </div>
              </div>
            </div>
            <div class="app-desc">{{app.APP_BRIEF}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <app-download v-if="showDownload" :apkType="downApkInfo" @onDownClose="closeDownload"></app-download>
  </div>
</template>
<script>
  export default {
    name: 'Home',
    components: {
      'app-download': () => import('../components/AppDownload.vue')
    },
    data() {
      return {
        showDownload: false,
        downApkInfo: []
      }
    },
    computed: {
      appList() {
        console.log(this.$store.getters.appList);
        return this.$store.getters.appList;
      }
    },
    methods: {
      sortApkType(apkType) {
        if (apkType.length == 2 && apkType[0].APK_TYPE == 'iOS') {
          return apkType.reverse();  // 反序
        } else{
          return apkType;
        }
      },
      toAppDetail(appId) {  // 进入app详情页
        this.$router.push({
          name: 'Detail', query: {
            appTypeId: this.$store.state.appType, appID: appId
          }
        });
      },
      toDownload(app) {
        console.log('toDownload', app);
        this.showDownload = true;
        this.downApkInfo = app.APP_INFO;
      },
      closeDownload(){
        this.showDownload = false;
      },
      isActive() {
      },
    }
  };
</script>
<style>
  .app-list {
    width: 960px;
    margin: 50px auto 0;
  }
  .app-item {
    width: 287px;
    text-align: left;
    margin-bottom: 62px;
    cursor: pointer;
  }
  .app-item .main-content {
    width: 100%;
    justify-content: flex-start;
  }
  .app-item a {
    text-decoration: none;
  }
  .app-img {
    width: 80px;
    height: 80px;
  }
  .app-info {
    flex: 1;
    margin-left: 14px;
  }
  .app-info .main-content {
    justify-content: space-between;
  }
  .app-name {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 20px;
    opacity: .85;
  }
  .app-version {
    width: 127px;
    line-height: 20px;
    opacity: .25;
  }
  .app-version div,
  .app-desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .app-download {
    display: block;
    width: 47px;
    height: 26px;
    color: #31C971;
    line-height: 28px;
    background: #FFFFFF;
    border: 1px solid #00CD66;
    border-radius: 4px;
    margin-top: 6px;
    text-align: center;
    transition: all .233s ease-in-out;
  }
  .app-download.active,
  .app-download:hover {
    color: #FFFFFF;
    opacity: .8;
    background: #31C971;
  }
  .app-desc {
    height: 48px;
    line-height: 24px;
    opacity: .45;
    margin-top: 10px;
  }
</style>

2020/appstore/src-new/views/Search.vue

@@ -1,13 +0,0 @@
<template>
  
</template>
<script>
export default {
};
</script>
<style>
</style>

2020/appstore/src/assets/css/index-mobile.css

@@ -547,7 +547,7 @@
  .no-data-img {
    width: 3.2rem;
    height: 2.8rem;
    background: url(../img/no-data-mobile.png) center no-repeat;
    background: url(../img/no-data-mobile.png) center/2.5rem no-repeat;
    margin: 0 auto;
  }
  

2020/appstore/src/views/Detail.vue

@@ -29,7 +29,7 @@
                </span>
              </template>
            </div>
            <div class="app-detail-size">大小：</div>
            <div class="app-detail-size">大小：{{app.APP_SIZE}}</div>
            <div class="app-detail-update">
              更新：{{dateChange(app.DONE_DATE)}}
            </div>

2020/appstore/src/views/Error.vue

@@ -64,7 +64,7 @@ export default {
  .error-img {
    width: 2.5rem;
    height: 2.19rem;
    background: url(../assets/img/error500-mobile.png) center no-repeat;
    background: url(../assets/img/error500-mobile.png) center/2.5rem no-repeat;
  }
  .error-text {

2020/appstore/src/views/Frame.vue

@@ -87,8 +87,7 @@ export default {
      this.$store.commit('setAppTypeId', typeId);
    }
    // 测试环境 /display/getAppType  /ipu-home/wlwdata?action=appStore.getAppType
    this.$http.get('/display/getAppType')
    this.$http.get(servicePath)
      .then((res) => {
        this.appTypes = res.APP_TYPE;
        this.$store.commit('setAppData', res.APP_TYPE);

2020/appstore/vue.config.js

@@ -15,27 +15,9 @@ module.exports = {
      // 提取出来的通用 chunk 和 vendor chunk。
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
//     newindex: {
//       // page 的入口
//       entry: 'src-new/main.js',
//       // 模板来源
//       template: 'public/index-new.html',
//       // 在 dist/index.html 的输出
//       filename: 'newindex.html',
//       // 当使用 title 选项时，
//       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
//       title: 'Index Page new',
//       // 在这个页面中包含的块，默认情况下会包含
//       // 提取出来的通用 chunk 和 vendor chunk。
// /*      chunks: ['chunk-vendors-new', 'chunk-common-new', 'index-new']*/
//     }
  },
  publicPath: './',
  devServer: {
    proxy: 'http://121.42.183.206:9070' // http://121.42.183.206:9070  http://appstore.aiipu.com
    proxy: 'http://121.42.183.206:9070'
  }
}