first commit

master
Joe 2 years ago
commit 656d9d75da

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: 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: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 651 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 469 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,492 @@
<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="left" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">围墙基础墙体及压顶变形缝未贯通</div>
</template>
<div class="step image1-1" @click="find(1)">
<img style="width: 0.35rem;" src="../assets/1-1.png" alt="" v-if="findList.includes(1)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="topRight" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">建筑物沉降观测标志布置标高不足固定不牢固 </div>
</template>
<div class="step image1-2" @click="find(2)">
<img style="width: 0.3rem;" src="../assets/1-2.png" alt="" v-if="findList.includes(2)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="leftBottom" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">场区内安全标志牌未按照警告禁止指令提示的顺序先左后右先上后下排列</div>
</template>
<div class="step image1-3" @click="find(3)">
<img style="width: 0.4rem;" src="../assets/1-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 image1-4" @click="find(4)">
<img style="width: 0.3rem;" src="../assets/1-4.png" alt="" v-if="findList.includes(4)">
</div>
</a-tooltip>
</template>
<template v-else-if="current == 1">
<a-tooltip trigger="click" placement="left" :align="{
targetOffset: ['0%','0%'],
}">
<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="rightTop" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">室内消防栓箱内设施配置缺失栓口不应安装门轴侧 口中心距地面 小于1.1m</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="topRight" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">变压器法兰间跨不规范无跨接线</div>
</template>
<div class="step image2-3" @click="find(3)">
<img style="width: 0.3rem;" src="../assets/2-3.png" alt="" v-if="findList.includes(3)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="right" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">爬梯制作安装不符合规范单段梯高宜不大于 10m</div>
</template>
<div class="step image2-4" @click="find(4)">
<img style="width: 0.4rem;" src="../assets/2-4.png" alt="" v-if="findList.includes(4)">
</div>
</a-tooltip>
</template>
<template v-else-if="current == 2">
<a-tooltip trigger="click" placement="left" :align="{
targetOffset: ['0%','-30%'],
}">
<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%','0%'],
}">
<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="topRight" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">没有两点接电</div>
</template>
<div class="step image3-3" @click="find(3)">
<img style="width: 0.3rem;" 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">预埋件未设膨胀缝短边大于 300mm 的预埋件</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="bottom" :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.25rem;" src="../assets/3-5.png" alt="" v-if="findList.includes(5)">
</div>
</a-tooltip>
<a-tooltip trigger="click" placement="top" :align="{
targetOffset: ['0%','0%'],
}">
<template slot="title">
<div class="tips-text">地板边缘没有达到大于1/2板面积的要求</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>
</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'),
],
current: 0,
isSuccessed: false,
findList: [],
massage: '请找找看,下面有几处违章?',
fourList: [0,1],
sixList: [2],
};
},
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 == 4 && this.fourList.includes(this.current)) || (this.findList.length == 6 && this.sixList.includes(this.current))) {
this.publish()
}
},
publish() {
this.isSuccessed = true
this.findList = this.findList.length == 4 ? [1,2,3,4] : [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-1 {
top: 22%;
right: 16.7%;
width: 0.8rem;
height: 1.2rem;
display: flex;
justify-content: start;
align-items: center;
}
.image1-2 {
bottom: 34%;
left: 40.9%;
width: 0.8rem;
height: 1.3rem;
display: flex;
justify-content: end;
align-items: start;
}
.image1-3 {
bottom: 17%;
right: 14.9%;
width: 2.4rem;
height: 1.3rem;
display: flex;
justify-content: start;
align-items: end;
}
.image1-4 {
bottom: 21%;
left: 21.9%;
width: 1.4rem;
height: 1.9rem;
display: flex;
justify-content: center;
align-items: start;
}
.image2-1 {
top: 15%;
right: 17.9%;
width: 1.1rem;
height: 1.5rem;
display: flex;
justify-content: start;
align-items: center;
}
.image2-2 {
bottom: 19%;
right: 34.9%;
width: 1.1rem;
height: 1.1rem;
display: flex;
justify-content: end;
align-items: center;
}
.image2-3 {
top: 32%;
left: 29.9%;
width: 1.1rem;
height: 1rem;
display: flex;
justify-content: end;
align-items: start;
}
.image2-4 {
bottom: 37%;
left: 10.9%;
width: 0.9rem;
height: 0.8rem;
display: flex;
justify-content: start;
align-items: end;
}
.image3-1 {
top: 20%;
left: 7.9%;
width: 1.1rem;
height: 1.3rem;
display: flex;
justify-content: end;
align-items: end;
}
.image3-2 {
bottom: 27%;
right: 40.9%;
width: 1.2rem;
height: 0.7rem;
display: flex;
justify-content: end;
align-items: center;
}
.image3-3 {
bottom: 13%;
right: 10.9%;
width: 0.7rem;
height: 0.5rem;
display: flex;
justify-content: start;
align-items: start;
}
.image3-4 {
bottom: 15%;
left: 7.8%;
width: 5.3rem;
height: 0.6rem;
display: flex;
justify-content: center;
align-items: end;
}
.image3-5 {
top: 10%;
right: 29.9%;
width: 1.1rem;
height: 0.5rem;
display: flex;
justify-content: start;
align-items: end;
}
.image3-6 {
bottom: 16%;
right: 19.9%;
width: 0.8rem;
height: 0.5rem;
display: flex;
justify-content: start;
align-items: center;
}
.bottom {
position: absolute;
z-index: 10;
opacity: 0.5;
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