first commit

master
Joe 2 years ago
commit 9ba1c36afd

24
.gitignore vendored

@ -0,0 +1,24 @@
.DS_Store
node_modules
/dist
package-lock.json
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

@ -0,0 +1,24 @@
# shop-tour-front
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

@ -0,0 +1,12 @@
module.exports = {
// vuecli3 不需要配置transform-vue-jsx
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry',
polyfills: ['es6.promise', 'es6.symbol']
}
]
]
}

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

@ -0,0 +1,51 @@
{
"name": "shop-tour-front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"amfe-flexible": "^2.2.1",
"ant-design-vue": "^1.7.8",
"axios": "^1.1.2",
"core-js": "^3.8.3",
"es6-promise": "^4.2.8",
"vue": "^2.6.14",
"vue-router": "^3.5.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-plugin-import": "^1.13.5",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"postcss-pxtorem": "^6.0.0",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

@ -0,0 +1,10 @@
module.exports = {
plugins: {
autoprefixer: {},
// flexible配置
"postcss-pxtorem": {
"rootValue": 75, // 设计稿宽度的1/10
"propList": ["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>互动通病库</title>
</head>
<body>
<noscript>
<strong>We're sorry but Demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

@ -0,0 +1,81 @@
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}
/* 改变a链接的默认样式,颜色和下划线 */
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "5B8B4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 938 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 651 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 712 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

@ -0,0 +1,18 @@
import '@babel/polyfill'
import Vue from 'vue'
import router from './router'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css';
import { Tooltip } from 'ant-design-vue';
Vue.use(Tooltip);
import 'amfe-flexible'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
// 注册仓库:
render: h => h(App),
}).$mount('#app')

@ -0,0 +1,30 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'MyHome',
component: Home,
meta: {
title: '互动通病库',
requireAuth: false,
}
}
];
const router = new Router({
routes
});
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next();
})
export default router;

@ -0,0 +1,802 @@
<template>
<div class="home">
<div class="content" v-if="isBegin">
<img style="width: 100%;" :src="imageList[current]" alt="">
<div class="text">
<img class="success" src="../assets/success.png" alt="" v-if="isSuccessed">
<div class="title">电缆与排管</div>
<div class="tips">{{ massage }}</div>
</div>
<template v-if="current == 0">
<a-tooltip trigger="click" placement="bottomRight" :align="{
targetOffset: ['50%','60%'],
}">
<template slot="title">
<div class="tips-text">现场护栏围护不到位未保持全封闭</div>
</template>
<div class="step image1" @click="find(1)">
<img style="width: 0.4rem;" src="../assets/1-1.png" alt="" v-if="findList.includes(1)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="rightTop" :align="{
targetOffset: ['40%','-10%'],
}">
<template slot="title">
<div class="tips-text">现场破拆路面二位作业人员未正确佩戴护目镜</div>
</template>
<div class="step image2" @click="find(2)">
<img style="width: 0.35rem;" src="../assets/1-2.png" alt="" v-if="findList.includes(2)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="left" :align="{
targetOffset: ['0%','-10%'],
}">
<template slot="title">
<div class="tips-text">挖掘机作业时基坑内同时还有其他作业人员在基坑处沟通工作</div>
</template>
<div class="step image3" @click="find(3)">
<img style="width: 0.35rem;" src="../assets/1-3.png" alt="" v-if="findList.includes(3)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="bottomLeft" :align="{
targetOffset: ['-20%','0%'],
}">
<template slot="title">
<div class="tips-text">有限空间作业未执行先通风再检测后作业要求</div>
</template>
<div class="step image4" @click="find(4)">
<img style="width: 0.3rem;" src="../assets/1-4.png" alt="" v-if="findList.includes(4)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">一位工作负责人手里拿着工作票工作票第六项工作负责人处未签名</div>
</template>
<div class="step image5" @click="find(5)">
<img style="width: 0.35rem;" src="../assets/1-5.png" alt="" v-if="findList.includes(5)">
</div>
</a-tooltip>
</template>
<template v-else-if="current == 1">
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['30%','10%'],
}">
<template slot="title">
<div class="tips-text">钢筋漏放少放钢筋间距不符合设计要求弯钩朝向不符合施工规定或未绑扎牢固</div>
</template>
<div class="step image2-1" @click="find(1)">
<img style="width: 0.35rem;" src="../assets/2-1.png" alt="" v-if="findList.includes(1)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="top" :align="{
targetOffset: ['0%','-40%'],
}">
<template slot="title">
<div class="tips-text">排管箱体模板缺乏足够的强度刚度和稳定性造成跑模</div>
</template>
<div class="step image2-2" @click="find(2)">
<img style="width: 0.4rem;" src="../assets/2-2.png" alt="" v-if="findList.includes(2)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['50%','5%'],
}">
<template slot="title">
<div class="tips-text">钢筋保护层不符合规定水泥砂浆垫块数量不足</div>
</template>
<div class="step image2-3" @click="find(3)">
<img style="width: 0.35rem;" src="../assets/2-3.png" alt="" v-if="findList.includes(3)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['60%','-10%'],
}">
<template slot="title">
<div class="tips-text">混凝土未进行振捣或养护不到位养护周期不够即拆模</div>
</template>
<div class="step image2-4" @click="find(4)">
<img style="width: 0.3rem;" src="../assets/2-4.png" alt="" v-if="findList.includes(4)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="leftTop" :align="{
targetOffset: ['-20%','-30%'],
}">
<template slot="title">
<div class="tips-text">工作负责人当天收工离开现场后分包单位作业人员未停止作业擅自开工</div>
</template>
<div class="step image2-5" @click="find(5)">
<img style="width: 0.35rem;" src="../assets/2-5.png" alt="" v-if="findList.includes(5)">
</div>
</a-tooltip>
</template>
<template v-else-if="current == 2">
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['90%','20%'],
}">
<template slot="title">
<div class="tips-text">老工井改造工作运行电缆未采取硬隔离保护</div>
</template>
<div class="step image3-1" @click="find(1)">
<img style="width: 0.35rem;" src="../assets/3-1.png" alt="" v-if="findList.includes(1)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="topRight" :align="{
targetOffset: ['0%','-20%'],
}">
<template slot="title">
<div class="tips-text">排管内未按设计孔位敷设</div>
</template>
<div class="step image3-2" @click="find(2)">
<img style="width: 0.3rem;" src="../assets/3-2.png" alt="" v-if="findList.includes(2)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="top" :align="{
targetOffset: ['0%','-35%'],
}">
<template slot="title">
<div class="tips-text">螺栓未紧固</div>
</template>
<div class="step image3-3" @click="find(3)">
<img style="width: 0.35rem;" src="../assets/3-3.png" alt="" v-if="findList.includes(3)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="top" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">防水防火封堵不严</div>
</template>
<div class="step image3-4" @click="find(4)">
<img style="width: 0.3rem;" src="../assets/3-4.png" alt="" v-if="findList.includes(4)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">连接角铁支架单边螺栓垫片支架数量不符合设计规定</div>
</template>
<div class="step image3-5" @click="find(5)">
<img style="width: 0.35rem;" src="../assets/3-5.png" alt="" v-if="findList.includes(5)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="leftTop" :align="{
targetOffset: ['-30%','-30%'],
}">
<template slot="title">
<div class="tips-text">工井电缆沟电缆层内电缆未上支架</div>
</template>
<div class="step image3-6" @click="find(6)">
<img style="width: 0.35rem;" src="../assets/3-6.png" alt="" v-if="findList.includes(6)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['40%','10%'],
}">
<template slot="title">
<div class="tips-text">接地扁铁未环通</div>
</template>
<div class="step image3-7" @click="find(7)">
<img style="width: 0.3rem;" src="../assets/3-7.png" alt="" v-if="findList.includes(7)">
</div>
</a-tooltip>
</template>
<template v-else-if="current == 3">
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['70%','0%'],
}">
<template slot="title">
<div class="tips-text">机动绞磨受力前方有人拉磨绳一人绞绳少于两人站位距离机动绞磨不满足安全距离要求</div>
</template>
<div class="step image4-1" @click="find(1)">
<img style="width: 0.35rem;" src="../assets/4-1.png" alt="" v-if="findList.includes(1)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="topLeft" :align="{
targetOffset: ['-20%','-40%'],
}">
<template slot="title">
<div class="tips-text">现场绞磨机转动部分未设置防护罩存在物体打击伤人风险</div>
</template>
<div class="step image4-2" @click="find(2)">
<img style="width: 0.35rem;" src="../assets/4-2.png" alt="" v-if="findList.includes(2)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="top" :align="{
targetOffset: ['0%','-35%'],
}">
<template slot="title">
<div class="tips-text">现场临时电源箱破损带电部位裸露存在人员触电风险</div>
</template>
<div class="step image4-3" @click="find(3)">
<img style="width: 0.35rem;" src="../assets/4-3.png" alt="" v-if="findList.includes(3)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="top" :align="{
targetOffset: ['0%','-30%'],
}">
<template slot="title">
<div class="tips-text">带电设备使用钢卷尺</div>
</template>
<div class="step image4-4" @click="find(4)">
<img style="width: 0.35rem;" src="../assets/4-4.png" alt="" v-if="findList.includes(4)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="topRight" :align="{
targetOffset: ['20%','-30%'],
}">
<template slot="title">
<div class="tips-text">现场工作票内工作接地未挂就开始工作开工前安全措施未全部完成</div>
</template>
<div class="step image4-5" @click="find(5)">
<img style="width: 0.25rem;" src="../assets/4-5.png" alt="" v-if="findList.includes(5)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="leftTop" :align="{
targetOffset: ['-30%','-30%'],
}">
<template slot="title">
<div class="tips-text">工作接地线接在抱箍上接地不可靠</div>
</template>
<div class="step image4-6" @click="find(6)">
<img style="width: 0.35rem;" src="../assets/4-6.png" alt="" v-if="findList.includes(6)">
</div>
</a-tooltip>
</template>
<template v-else-if="current == 4">
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">现场钢板桩拔桩作业时未使用牢固可靠的构件对钢板桩进行固定存在钢板桩滑脱伤人风险</div>
</template>
<div class="step image5-1" @click="find(1)">
<img style="width: 0.35rem;" src="../assets/5-1.png" alt="" v-if="findList.includes(1)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="bottomRight" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">临时接地体埋深深度不足0.6M</div>
</template>
<div class="step image5-2" @click="find(2)">
<img style="width: 0.3rem;" src="../assets/5-2.png" alt="" v-if="findList.includes(2)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['0%','30%'],
}">
<template slot="title">
<div class="tips-text">电缆通道上方未按未敷设警示带</div>
</template>
<div class="step image5-3" @click="find(3)">
<img style="width: 0.35rem;" src="../assets/5-3.png" alt="" v-if="findList.includes(3)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="topRight" :align="{
targetOffset: ['20%','-50%'],
}">
<template slot="title">
<div class="tips-text">电缆通道埋深不足</div>
</template>
<div class="step image5-4" @click="find(4)">
<img style="width: 0.4rem;" src="../assets/5-4.png" alt="" v-if="findList.includes(4)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="topLeft" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">施工安全技术措施内未编写直埋开挖相关安全管控措施方案措施编制不完善</div>
</template>
<div class="step image5-5" @click="find(5)">
<img style="width: 0.35rem;" src="../assets/5-5.png" alt="" v-if="findList.includes(5)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="topLeft" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">埋管道未放垫层</div>
</template>
<div class="step image5-6" @click="find(6)">
<img style="width: 0.3rem;" src="../assets/5-6.png" alt="" v-if="findList.includes(6)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="topLeft" :align="{
targetOffset: ['-20%','-60%'],
}">
<template slot="title">
<div class="tips-text">管口应该有交错没有铺设管枕</div>
</template>
<div class="step image5-7" @click="find(7)">
<img style="width: 0.4rem;" src="../assets/5-7.png" alt="" v-if="findList.includes(7)">
</div>
</a-tooltip>
</template>
<div class="bottom">
<div :class="current == 0 ? 'button disabled' : 'button'" @click="prev"></div>
<div class="button" @click="publish"></div>
<div class="button" @click="refresh"></div>
<div :class="current == imageList.length - 1 ? 'button disabled' : 'button'" @click="next"></div>
</div>
</div>
<div class="content" v-else>
<img style="width: 100%;" src="../assets/home-bg.jpg" alt="">
<div class="home-title">安全质量标准化常见问题通病库互动小程序(电缆与排管)</div>
<div class="entry" @click="isBegin = true">
<span>进入程序</span>
<img src="../assets/right.png" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "MyHome",
data() {
//
return {
isBegin: false,
imageList: [
require('../assets/bg1.png'),
require('../assets/bg2.png'),
require('../assets/bg3.png'),
require('../assets/bg4.png'),
require('../assets/bg5.png'),
],
current: 0,
isSuccessed: false,
findList: [],
massage: '请找找看,下面有几处违章?',
sixList: [3],
sevenList: [2,4],
fiveList: [0,1]
};
},
methods: {
prev() {
if (this.current === 0) {
return
}
this.current -= 1
this.refresh()
},
next() {
if (this.current === this.imageList.length - 1) {
return
}
this.current += 1
this.refresh()
},
find(val) {
if (!this.findList.includes(val)) {
this.findList.push(val)
}
if ((this.findList.length == 7 && this.sevenList.includes(this.current)) || (this.findList.length == 6 && this.sixList.includes(this.current)) || (this.fiveList.includes(this.current) && this.findList.length == 5)) {
this.publish()
}
},
publish() {
this.isSuccessed = true
this.findList = this.fiveList.includes(this.current) ? [1,2,3,4,5] : this.sevenList.includes(this.current) ? [1,2,3,4,5,6,7]:[1,2,3,4,5,6]
this.massage = "恭喜您,找到了所有的问题点"
},
refresh() {
this.isSuccessed = false
this.findList = []
this.massage = "请找找看,下面有几处违章?"
}
},
// - 访DOM
mounted() { },
};
</script>
<style scoped>
.home {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: whitesmoke;
}
.content {
overflow: 'hidden';
position: relative;
width: 100%;
}
.text {
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
width: 100%;
height: 30%;
padding-left: 8%;
padding-top: 3%;
color: #fff;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 16%, rgba(0, 0, 0, 0) 100%);
letter-spacing: 0.03rem;
box-sizing: border-box;
}
.home-title {
position: absolute;
z-index: 1;
top: 15.4%;
left: 0;
right: 0;
width: 80%;
margin: 0 auto;
text-align: center;
font-size: 0.54rem;
color: #fff;
}
.entry {
position: absolute;
left: 0px;
right: 0;
bottom: 20%;
margin: 0 auto;
width: 20%;
height: 10%;
font-size: 0.26rem;
color: #000;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.06rem;
background: #ECD8A4;
cursor: pointer;
}
.entry span {
margin-right: 0.1rem;
}
.entry img {
width: 0.16rem;
}
.success {
float: left;
margin-right: 0.16rem;
margin-top: -0.1rem;
width: 1.4rem;
}
.text .title {
font-size: 0.28rem;
line-height: 0.3rem;
}
.text .tips {
margin-top: 0.08rem;
font-size: 0.15rem;
}
.tips-title {
font-size: 0.18rem;
}
.tips-text {
font-size: 0.13rem;
}
.step {
position: absolute;
z-index: 8;
}
.image1 {
top: 14.6%;
right: 5%;
width: 2rem;
height: 1rem;
display: flex;
justify-content: center;
align-items: start;
}
.image2 {
top: 30.3%;
left: 28.4%;
width: 1.6rem;
height: 1.6rem;
display: flex;
justify-content: center;
align-items: start;
}
.image3 {
top: 41%;
right: 28.4%;
width: 1.6rem;
height: 1.5rem;
display: flex;
justify-content: end;
align-items: end;
}
.image4 {
top: 8%;
right: 42.7%;
width: 1.6rem;
height: 1.2rem;
display: flex;
justify-content: center;
align-items: end;
}
.image5 {
bottom: 32%;
left: 4.7%;
width: 1.6rem;
height: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.image2-1 {
top: 35%;
right: 31.2%;
width: 0.6rem;
height: 1rem;
display: flex;
justify-content: start;
align-items: center;
transform: rotate(-42deg);
}
.image2-2 {
bottom: 33%;
right: 16.5%;
width: 1.9rem;
height: 0.7rem;
display: flex;
justify-content: center;
align-items: end;
}
.image2-3 {
bottom: 22%;
left: 1%;
width: 2.3rem;
height: 1rem;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(-15deg);
}
.image2-4 {
bottom: 40%;
left: 43.8%;
width: 0.8rem;
height: 0.7rem;
display: flex;
justify-content: start;
align-items: end;
}
.image2-5 {
top: 12%;
right: 3.8%;
width: 0.8rem;
height: 1rem;
display: flex;
justify-content: start;
align-items: end;
}
.image3-1 {
top: -9%;
left: 32.8%;
width: 0.5rem;
height: 4rem;
display: flex;
justify-content: start;
align-items: start;
transform: rotate(-80deg);
}
.image3-2 {
top: 32%;
right: 29.8%;
width: 0.5rem;
height: 0.5rem;
display: flex;
justify-content: end;
align-items: start;
}
.image3-3 {
bottom: 20%;
right: 25%;
width: 1rem;
height: 1rem;
display: flex;
justify-content: start;
align-items: center;
}
.image3-4 {
top: 33%;
right: 9.7%;
width: 1rem;
height: 1rem;
display: flex;
justify-content: center;
align-items: start;
}
.image3-5 {
top: 41%;
left: 36.7%;
width: 0.7rem;
height: 1.6rem;
display: flex;
justify-content: end;
align-items: center;
}
.image3-6 {
bottom: 15%;
right: 11%;
width: 0.5rem;
height: 1.6rem;
display: flex;
justify-content: start;
align-items: center;
transform: rotate(-38deg);
}
.image3-7 {
top: 8%;
left: 46%;
width: 0.5rem;
height: 0.6rem;
display: flex;
justify-content: start;
align-items: end;
}
.image4-1 {
bottom: 37%;
left: 10%;
width: 1rem;
height: 1.5rem;
display: flex;
justify-content: start;
align-items: center;
}
.image4-2 {
bottom: 22%;
left: 19.7%;
width: 1.3rem;
height: 0.8rem;
display: flex;
justify-content: center;
align-items: center;
}
.image4-3 {
bottom: 20%;
right: 39.7%;
width: 0.8rem;
height: 0.5rem;
display: flex;
justify-content: start;
align-items: end;
}
.image4-4 {
bottom: 43.5%;
right: 27.1%;
width: 0.5rem;
height: 0.8rem;
display: flex;
justify-content: start;
align-items: center;
}
.image4-5 {
bottom: 15%;
right: 11.1%;
width: 1rem;
height: 0.6rem;
display: flex;
justify-content: center;
align-items: end;
}
.image4-6 {
bottom: 42%;
right: 8.1%;
width: 0.6rem;
height: 0.4rem;
display: flex;
justify-content: start;
align-items: start;
}
.image5-1 {
top: 14%;
left: 18.1%;
width: 1rem;
height: 0.6rem;
display: flex;
justify-content: end;
align-items: end;
}
.image5-2 {
top: 8%;
right: 21.1%;
width: 0.6rem;
height: 1.2rem;
display: flex;
justify-content: start;
align-items: center;
}
.image5-3 {
bottom: 16%;
left: 17.1%;
width: 1.2rem;
height: 0.8rem;
display: flex;
justify-content: end;
align-items: start;
}
.image5-4 {
bottom: 22%;
right: 18.1%;
width: 1.8rem;
height: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(-30deg);
}
.image5-5 {
top: 26%;
left: 39.1%;
width: 1.2rem;
height: 1.6rem;
display: flex;
justify-content: start;
align-items: center;
}
.image5-6 {
bottom: 15%;
right: 6.1%;
width: 0.6rem;
height: 0.6rem;
display: flex;
justify-content: end;
align-items: start;
}
.image5-7 {
bottom: 15%;
right: 13.1%;
width: 1.6rem;
height: 0.6rem;
display: flex;
justify-content: start;
align-items: center;
transform: rotate(-30deg);
}
.bottom {
position: absolute;
z-index: 10;
width: 100%;
height: 14.4%;
bottom: 0;
display: flex;
justify-content: space-evenly;
align-items: start;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.bottom .button {
font-size: 0.15rem;
width: 17%;
height: 54.3%;
color: #fff;
background-color: #D04010;
text-align: center;
border-radius: 60px;
line-height: 3;
}
.bottom .button.disabled {
background-color: #B0B0B0;
}
</style>

@ -0,0 +1,13 @@
// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
// transpileDependencies: true
// })
module.exports = {
publicPath: '/',
// 关闭打包生成map文件
productionSourceMap: false,
// 关闭ESLINT校验工具
lintOnSave: false,
css: {},
configureWebpack: config => { config.entry.app = ["@babel/polyfill", "./src/main.js"]; },
}
Loading…
Cancel
Save