|
|
@@ -0,0 +1,136 @@
|
|
|
+<template>
|
|
|
+ <div class="hc-app-body h-full w-full">
|
|
|
+ <img class="bg-img h-full w-full" :src="bgImg" alt="">
|
|
|
+ <div class="app-body h-full w-full">
|
|
|
+ <div class="app-company-name hc-flex-center">
|
|
|
+ <img :src="companyName" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="app-title">
|
|
|
+ <div class="icon-box hc-flex-center">
|
|
|
+ <img :src="appIcon" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="name">工程云家</div>
|
|
|
+ <div class="version">当前版本：1.0.0</div>
|
|
|
+ <div class="time">更新时间：2023-04-23</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="app-img hc-flex-center">
|
|
|
+ <img :src="appImg" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="app-btn">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-button type="success">
|
|
|
+ <i class="i-ic-baseline-android"/>
|
|
|
+ <span class="ml-1">下载安卓APP</span>
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-button type="success">
|
|
|
+ <i class="i-ic-baseline-apple"/>
|
|
|
+ <span class="ml-1">下载苹果APP</span>
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="h-100px"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {onMounted, onUnmounted} from "vue";
|
|
|
+import bgImg from '~src/assets/archives/topHead.png'
|
|
|
+import companyName from '~src/assets/index/companyName.png'
|
|
|
+import appIcon from '~src/assets/index/app-icon.png'
|
|
|
+import appImg from '~src/assets/index/1242_2208.png'
|
|
|
+
|
|
|
+//渲染完成
|
|
|
+onMounted(() => {
|
|
|
+ const dom = document.documentElement
|
|
|
+ dom.setAttribute('class', `${dom.offsetWidth > 700 ?'hc-app-pc':'hc-app-mobile'}`)
|
|
|
+})
|
|
|
+
|
|
|
+//页面卸载
|
|
|
+onUnmounted(() => {
|
|
|
+ document.documentElement.removeAttribute('class')
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+html.hc-app-mobile,
|
|
|
+html.hc-app-mobile body,
|
|
|
+html.hc-app-mobile body #app {
|
|
|
+ position: relative;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.hc-app-body {
|
|
|
+ position: relative;
|
|
|
+ .bg-img {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .app-body {
|
|
|
+ position: relative;
|
|
|
+ .app-company-name {
|
|
|
+ position: relative;
|
|
|
+ padding: 20px;
|
|
|
+ height: 30px;
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-title {
|
|
|
+ position: relative;
|
|
|
+ padding: 0 20px;
|
|
|
+ color: white;
|
|
|
+ display: flex;
|
|
|
+ .icon-box {
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-box {
|
|
|
+ position: relative;
|
|
|
+ width: calc(100% - 80px);
|
|
|
+ padding-left: 14px;
|
|
|
+ font-size: 13px;
|
|
|
+ .name {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-top: 6px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-img {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 0 24px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .app-btn {
|
|
|
+ position: relative;
|
|
|
+ padding: 24px;
|
|
|
+ overflow: hidden;
|
|
|
+ .el-button {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
