4.23
This commit is contained in:
hezhidong
+89
-79
@@ -1,96 +1,106 @@
|
||||
import axios from 'axios'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex';
|
||||
import { Toast, Dialog } from 'vant';
|
||||
import axios from "axios";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import { Toast, Dialog } from "vant";
|
||||
// import { getItem, setItem, removeItem, dalert } from '@/com/index'
|
||||
const errorCode = {
|
||||
'401': '登录状态已过期,即将返回首页重新登录。',
|
||||
'403': '当前操作没有权限',
|
||||
'404': '访问资源不存在',
|
||||
'default': '系统未知错误，请反馈给管理员'
|
||||
}
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
const loadNoCloseArr = ['/upload/face', ]
|
||||
401: "登录状态已过期,即将返回首页重新登录",
|
||||
403: "当前操作没有权限",
|
||||
404: "访问资源不存在",
|
||||
default: "系统未知错误，请反馈给管理员",
|
||||
};
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const loadNoCloseArr = ["/upload/face"];
|
||||
// 判断当前的运行环境 process.env.NODE_ENV
|
||||
// isDev 为真 开发环境 --- npm run serve
|
||||
// isDev 为假 非开发环境（测试环境，生产环境）- npm run build
|
||||
const isDev = process.env.NODE_ENV === 'development'
|
||||
const isDev = process.env.NODE_ENV === "development";
|
||||
const request = axios.create({
|
||||
// 根据环境 设置不同的baseURL
|
||||
// 如果配置了单个的反向代理 --- 字符串模式
|
||||
// 如果配置了多个的反向代理 --- 对象模式
|
||||
// baseURL: isDev ? 'http://visitor.scdswj.cn/prod-api' : 'http://visitor.scdswj.cn/prod-api'
|
||||
baseURL: isDev ? 'http://192.168.31.118:8195' : 'http://visitor.scdswj.cn/prod-api'
|
||||
})
|
||||
baseURL: isDev
|
||||
? "http://visitor.scdswj.cn/prod-api"
|
||||
: "http://visitor.scdswj.cn/prod-api",
|
||||
// baseURL: isDev ? 'http://192.168.31.118:8195' : 'http://visitor.scdswj.cn/prod-api'
|
||||
});
|
||||
// 'http://rap2api.taobao.org/app/mock/297766/example/1643070528065'
|
||||
|
||||
// 请求拦截器 - 所有的请求开始之前先到此处
|
||||
request.interceptors.request.use((config) => {
|
||||
// 可以设置 加载的动画效果 的展示
|
||||
// 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
|
||||
console.log(config)
|
||||
return config
|
||||
}, (error) => {
|
||||
return Promise.reject(error)
|
||||
})
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
// 可以设置 加载的动画效果 的展示
|
||||
// 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
|
||||
console.log(config);
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 响应拦截器 --- 所有请求的相应先到此处
|
||||
request.interceptors.response.use((response) => {
|
||||
// 可以设置 加载的动画效果 的隐藏
|
||||
const code = response.data.code || 200;
|
||||
const message = errorCode[code] || response.data.msg || errorCode['default']
|
||||
if(code == 200){
|
||||
if(loadNoCloseArr.includes(response.config.url)){ // 设置请求不关闭加载动画接口
|
||||
}else{
|
||||
Toast.clear()
|
||||
}
|
||||
}else{
|
||||
Toast.clear()
|
||||
}
|
||||
if (code === 401) {
|
||||
Toast.fail(message)
|
||||
setTimeout(()=>{
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
const redirectUrl = localStorage.getItem('redirect')
|
||||
if(redirectUrl){
|
||||
window.location.href = redirectUrl
|
||||
}else{
|
||||
window.location.href = '/userHome'
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
// 可以设置 加载的动画效果 的隐藏
|
||||
const code = response.data.code || 200;
|
||||
const message =
|
||||
errorCode[code] || response.data.msg || errorCode["default"];
|
||||
if (code == 200) {
|
||||
if (loadNoCloseArr.includes(response.config.url)) {
|
||||
// 设置请求不关闭加载动画接口
|
||||
} else {
|
||||
Toast.clear();
|
||||
}
|
||||
},2000)
|
||||
return Promise.reject('登录状态已过期,即将返回首页重新登录。')
|
||||
} else if (code === 500) {
|
||||
// Message({ message: msg, type: 'error' })
|
||||
Toast.fail(message)
|
||||
return Promise.reject(response.data)
|
||||
} else if (code === 601) {
|
||||
// Message({ message: msg, type: 'warning' })
|
||||
Toast.fail(message)
|
||||
return Promise.reject('error')
|
||||
} else if (code != 200) {
|
||||
Toast.fail(message)
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
return response.data
|
||||
} else {
|
||||
Toast.clear();
|
||||
}
|
||||
if (code === 401) {
|
||||
console.log("进了");
|
||||
Toast.fail(message);
|
||||
setTimeout(() => {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("user");
|
||||
const redirectUrl = localStorage.getItem("redirect");
|
||||
if (redirectUrl) {
|
||||
window.location.href = redirectUrl;
|
||||
} else {
|
||||
window.location.href = "/adminHome";
|
||||
}
|
||||
}, 2000);
|
||||
return Promise.reject("登录状态已过期,即将返回首页重新登录。");
|
||||
} else if (code === 500) {
|
||||
// Message({ message: msg, type: 'error' })
|
||||
Toast.fail(message);
|
||||
return Promise.reject(response.data);
|
||||
} else if (code === 601) {
|
||||
// Message({ message: msg, type: 'warning' })
|
||||
Toast.fail(message);
|
||||
return Promise.reject("error");
|
||||
} else if (code != 200) {
|
||||
Toast.fail(message);
|
||||
return Promise.reject("error");
|
||||
} else {
|
||||
return response.data;
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
Toast.clear();
|
||||
console.log(error.message);
|
||||
let { message } = error;
|
||||
if (message == "Network Error") {
|
||||
message = "后端接口连接异常";
|
||||
} else if (message.includes("timeout")) {
|
||||
message = "系统接口请求超时";
|
||||
} else if (message.includes("Request failed with status code")) {
|
||||
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
||||
}
|
||||
console.log(message);
|
||||
Toast.fail(message);
|
||||
return Promise.reject(error.response);
|
||||
}
|
||||
}, error => {
|
||||
Toast.clear()
|
||||
console.log(error.message)
|
||||
let { message } = error;
|
||||
if (message == "Network Error") {
|
||||
message = "后端接口连接异常";
|
||||
} else if (message.includes("timeout")) {
|
||||
message = "系统接口请求超时";
|
||||
} else if (message.includes("Request failed with status code")) {
|
||||
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
||||
}
|
||||
console.log(message)
|
||||
Toast.fail(message)
|
||||
return Promise.reject(error.response)
|
||||
);
|
||||
|
||||
})
|
||||
|
||||
export default request
|
||||
export default request;
|
||||
|
||||
+90
-81
@@ -1,98 +1,107 @@
|
||||
import axios from 'axios'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex';
|
||||
import { Toast, Dialog } from 'vant';
|
||||
import axios from "axios";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import { Toast, Dialog } from "vant";
|
||||
// import { getItem, setItem, removeItem, dalert } from '@/com/index'
|
||||
const errorCode = {
|
||||
'401': '登录状态已过期,即将返回首页重新登录。',
|
||||
'403': '当前操作没有权限',
|
||||
'404': '访问资源不存在',
|
||||
'default': '系统未知错误，请反馈给管理员'
|
||||
}
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
const loadNoCloseArr = ['/upload/face', ]
|
||||
401: "登录状态已过期,即将返回首页重新登录。",
|
||||
403: "当前操作没有权限",
|
||||
404: "访问资源不存在",
|
||||
default: "系统未知错误，请反馈给管理员",
|
||||
};
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const loadNoCloseArr = ["/upload/face"];
|
||||
// 判断当前的运行环境 process.env.NODE_ENV
|
||||
// isDev 为真 开发环境 --- npm run serve
|
||||
// isDev 为假 非开发环境（测试环境，生产环境）- npm run build
|
||||
const isDev = process.env.NODE_ENV === 'development'
|
||||
const isDev = process.env.NODE_ENV === "development";
|
||||
const request = axios.create({
|
||||
// 根据环境 设置不同的baseURL
|
||||
// 如果配置了单个的反向代理 --- 字符串模式
|
||||
// 如果配置了多个的反向代理 --- 对象模式
|
||||
// baseURL: isDev ? 'http://visitor.scdswj.cn/prod-api' : 'http://visitor.scdswj.cn/prod-api'
|
||||
baseURL: isDev ? 'http://visitor.scdswj.cn/prod-api' : 'http://visitor.scdswj.cn/prod-api'
|
||||
})
|
||||
baseURL: isDev
|
||||
? "http://visitor.scdswj.cn/prod-api"
|
||||
: "http://visitor.scdswj.cn/prod-api",
|
||||
// baseURL: isDev ? "http://192.168.31.124:8195" : "http://192.168.31.124:8195",
|
||||
});
|
||||
// 'http://rap2api.taobao.org/app/mock/297766/example/1643070528065'
|
||||
|
||||
// 请求拦截器 - 所有的请求开始之前先到此处
|
||||
request.interceptors.request.use((config) => {
|
||||
// 可以设置 加载的动画效果 的展示
|
||||
// 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
|
||||
console.log(config)
|
||||
return config
|
||||
}, (error) => {
|
||||
return Promise.reject(error)
|
||||
})
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
// 可以设置 加载的动画效果 的展示
|
||||
// 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
|
||||
console.log(config);
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// 响应拦截器 --- 所有请求的相应先到此处
|
||||
request.interceptors.response.use((response) => {
|
||||
// 可以设置 加载的动画效果 的隐藏
|
||||
const code = response.data.code || 200;
|
||||
const message = errorCode[code] || response.data.msg || errorCode['default']
|
||||
if(code == 200){
|
||||
if(loadNoCloseArr.includes(response.config.url)){ // 设置请求不关闭加载动画接口
|
||||
}else{
|
||||
Toast.clear()
|
||||
}
|
||||
}else{
|
||||
Toast.clear()
|
||||
}
|
||||
if (code === 401) {
|
||||
Toast.fail(message)
|
||||
setTimeout(()=>{
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
localStorage.removeItem('userToken');
|
||||
|
||||
const redirectUrl = localStorage.getItem('redirect')
|
||||
if(redirectUrl){
|
||||
window.location.href = redirectUrl
|
||||
}else{
|
||||
window.location.href = '/userHome'
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
// 可以设置 加载的动画效果 的隐藏
|
||||
const code = response.data.code || 200;
|
||||
const message =
|
||||
errorCode[code] || response.data.msg || errorCode["default"];
|
||||
if (code == 200) {
|
||||
if (loadNoCloseArr.includes(response.config.url)) {
|
||||
// 设置请求不关闭加载动画接口
|
||||
} else {
|
||||
Toast.clear();
|
||||
}
|
||||
},2000)
|
||||
return Promise.reject('登录状态已过期,即将返回首页重新登录。')
|
||||
} else if (code === 500) {
|
||||
// Message({ message: msg, type: 'error' })
|
||||
Toast.fail(message)
|
||||
return Promise.reject(response.data)
|
||||
} else if (code === 601) {
|
||||
// Message({ message: msg, type: 'warning' })
|
||||
Toast.fail(message)
|
||||
return Promise.reject('error')
|
||||
} else if (code != 200) {
|
||||
Toast.fail(message)
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
return response.data
|
||||
}
|
||||
}, error => {
|
||||
Toast.clear()
|
||||
console.log(error.message)
|
||||
let { message } = error;
|
||||
if (message == "Network Error") {
|
||||
message = "后端接口连接异常";
|
||||
} else if (message.includes("timeout")) {
|
||||
message = "系统接口请求超时";
|
||||
} else if (message.includes("Request failed with status code")) {
|
||||
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
||||
}
|
||||
console.log(message)
|
||||
Toast.fail(message)
|
||||
return Promise.reject(error.response)
|
||||
} else {
|
||||
Toast.clear();
|
||||
}
|
||||
if (code === 401) {
|
||||
Toast.fail(message);
|
||||
setTimeout(() => {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("user");
|
||||
localStorage.removeItem("userToken");
|
||||
|
||||
})
|
||||
const redirectUrl = localStorage.getItem("redirect");
|
||||
if (redirectUrl) {
|
||||
window.location.href = redirectUrl;
|
||||
} else {
|
||||
window.location.href = "/userHome";
|
||||
}
|
||||
}, 2000);
|
||||
return Promise.reject("登录状态已过期,即将返回首页重新登录。");
|
||||
} else if (code === 500) {
|
||||
// Message({ message: msg, type: 'error' })
|
||||
Toast.fail(message);
|
||||
return Promise.reject(response.data);
|
||||
} else if (code === 601) {
|
||||
// Message({ message: msg, type: 'warning' })
|
||||
Toast.fail(message);
|
||||
return Promise.reject("error");
|
||||
} else if (code != 200) {
|
||||
Toast.fail(message);
|
||||
return Promise.reject("error");
|
||||
} else {
|
||||
return response.data;
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
Toast.clear();
|
||||
console.log(error.message);
|
||||
let { message } = error;
|
||||
if (message == "Network Error") {
|
||||
message = "后端接口连接异常";
|
||||
} else if (message.includes("timeout")) {
|
||||
message = "系统接口请求超时";
|
||||
} else if (message.includes("Request failed with status code")) {
|
||||
message = "系统接口" + message.substr(message.length - 3) + "异常";
|
||||
}
|
||||
console.log(message);
|
||||
Toast.fail(message);
|
||||
return Promise.reject(error.response);
|
||||
}
|
||||
);
|
||||
|
||||
export default request
|
||||
export default request;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 547 KiB After Width: | Height: | Size: 582 KiB |
+62
-66
@@ -1,110 +1,106 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import register from "../views/register.vue";
|
||||
|
||||
const routerHistory = createWebHistory()
|
||||
const routerHistory = createWebHistory();
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
name:'login',
|
||||
path: "/login",
|
||||
name: "login",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/login.vue')
|
||||
component: () => import("../views/login.vue"),
|
||||
},
|
||||
{
|
||||
path: '/visitorApply',
|
||||
name:'visitorApply',
|
||||
path: "/visitorApply",
|
||||
name: "visitorApply",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/visitorApply.vue'),
|
||||
meta: { title: '我要预约' }
|
||||
component: () => import("../views/visitorApply.vue"),
|
||||
meta: { title: "我要预约" },
|
||||
},
|
||||
{
|
||||
path: '/applyInquire',
|
||||
name:'applyInquire',
|
||||
component: () => import('../views/applyInquire.vue'),
|
||||
meta: { title: '预约查询' }
|
||||
path: "/applyInquire",
|
||||
name: "applyInquire",
|
||||
component: () => import("../views/applyInquire.vue"),
|
||||
meta: { title: "预约查询" },
|
||||
},
|
||||
{
|
||||
path: '/applyRecord',
|
||||
name:'applyRecord',
|
||||
path: "/applyRecord",
|
||||
name: "applyRecord",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/applyRecord.vue'),
|
||||
meta: { title: '预约记录' }
|
||||
component: () => import("../views/applyRecord.vue"),
|
||||
meta: { title: "预约记录" },
|
||||
},
|
||||
|
||||
{
|
||||
path: '/apply',
|
||||
name:'apply',
|
||||
path: "/apply",
|
||||
name: "apply",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/apply.vue'),
|
||||
meta: { title: '我要预约' }
|
||||
component: () => import("../views/apply.vue"),
|
||||
meta: { title: "我要预约" },
|
||||
},
|
||||
{
|
||||
path: '/adminHome',
|
||||
name:'adminHome',
|
||||
path: "/adminHome",
|
||||
name: "adminHome",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/adminHome.vue'),
|
||||
meta: { title: '智能访客' }
|
||||
component: () => import("../views/adminHome.vue"),
|
||||
meta: { title: "智能访客" },
|
||||
},
|
||||
{
|
||||
path: '/visitorRecord',
|
||||
name:'visitorRecord',
|
||||
path: "/visitorRecord",
|
||||
name: "visitorRecord",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/visitorRecord.vue'),
|
||||
meta: { title: '访客记录' }
|
||||
component: () => import("../views/visitorRecord.vue"),
|
||||
meta: { title: "访客记录" },
|
||||
},
|
||||
{
|
||||
path: '/Invitation',
|
||||
name:'Invitation',
|
||||
path: "/Invitation",
|
||||
name: "Invitation",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/Invitation.vue'),
|
||||
meta: { title: '我要邀约' }
|
||||
component: () => import("../views/Invitation.vue"),
|
||||
meta: { title: "我要邀约" },
|
||||
},
|
||||
{
|
||||
path: '/userHome',
|
||||
name:'userHome',
|
||||
path: "/userHome",
|
||||
name: "userHome",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/userHome.vue'),
|
||||
meta: { title: '智能访客' }
|
||||
component: () => import("../views/userHome.vue"),
|
||||
meta: { title: "智能访客" },
|
||||
},
|
||||
|
||||
{
|
||||
path: '/register',
|
||||
name:'register',
|
||||
component: register
|
||||
path: "/register",
|
||||
name: "register",
|
||||
component: register,
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name:'home',
|
||||
path: "/home",
|
||||
name: "home",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/home.vue'),
|
||||
meta: { title: '员工信息' }
|
||||
|
||||
component: () => import("../views/home.vue"),
|
||||
meta: { title: "员工信息" },
|
||||
},
|
||||
{
|
||||
path: '/specialCrowd',
|
||||
name:'specialCrowd',
|
||||
path: "/specialCrowd",
|
||||
name: "specialCrowd",
|
||||
// redirect: '/login',
|
||||
component: () => import('../views/specialCrowd.vue'),
|
||||
meta: { title: '特殊人员录入' }
|
||||
component: () => import("../views/specialCrowd.vue"),
|
||||
meta: { title: "特殊人员录入" },
|
||||
},
|
||||
{
|
||||
path:'/',
|
||||
name:'',
|
||||
component:()=>import('../views/userHome.vue'),
|
||||
meta: { title: '智能访客' }
|
||||
|
||||
path: "/",
|
||||
name: "",
|
||||
component: () => import("../views/userHome.vue"),
|
||||
meta: { title: "智能访客" },
|
||||
},
|
||||
{ path: '/:pathMatch(.*)',
|
||||
redirect: '/userHome',
|
||||
}
|
||||
]
|
||||
{ path: "/:pathMatch(.*)", redirect: "/userHome" },
|
||||
];
|
||||
const router = createRouter({
|
||||
history: routerHistory,
|
||||
routes
|
||||
})
|
||||
const title = document.querySelector('title')
|
||||
history: routerHistory,
|
||||
routes,
|
||||
});
|
||||
const title = document.querySelector("title");
|
||||
router.beforeEach((to, from, next) => {
|
||||
title.innerText = to.meta.title
|
||||
next()
|
||||
})
|
||||
export default router
|
||||
title.innerText = to.meta.title;
|
||||
next();
|
||||
});
|
||||
export default router;
|
||||
|
||||
+90
-105
@@ -1,142 +1,127 @@
|
||||
<template>
|
||||
<div v-if="!canvasUrl" class='invitation-model-fixed' id="canvas">
|
||||
<img src="../assets/yaoqingbeijingtu.png" alt="" class="big-img">
|
||||
<img class="ewm" :src="'data:image/png;base64,'+imgEncode" alt="">
|
||||
<!-- <img src="" alt=""> -->
|
||||
<div v-if="!canvasUrl" class="invitation-model-fixed" id="canvas">
|
||||
<img src="../assets/yaoqingbeijingtu.png" alt="" class="big-img" />
|
||||
<img class="ewm" :src="'data:image/png;base64,' + imgEncode" alt="" />
|
||||
</div>
|
||||
<div v-if="canvasUrl" class="img-fixed">
|
||||
<img :src="canvasUrl" alt="">
|
||||
<img :src="canvasUrl" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- <img src="" alt=""> -->
|
||||
<Savesuccessmodel v-if="false" />
|
||||
<Savesuccessmodel v-if="false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import { rulesForm, resetForm, rulesPhone } from '@/com/index'
|
||||
import dd from 'dingtalk-jsapi'
|
||||
import html2canvas from 'html2canvas'
|
||||
import Savesuccessmodel from '@/components/save-success.vue'
|
||||
import { getToken, getVisitorRecord, getWhiteCode } from '@/api/admin.js'
|
||||
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import { rulesForm, resetForm, rulesPhone } from "@/com/index";
|
||||
import dd from "dingtalk-jsapi";
|
||||
import html2canvas from "html2canvas";
|
||||
import Savesuccessmodel from "@/components/save-success.vue";
|
||||
import { getToken, getVisitorRecord, getWhiteCode } from "@/api/admin.js";
|
||||
|
||||
/* @data */
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
const imgEncode = ref('')
|
||||
const raw = ref('')
|
||||
const canvasUrl = ref('')
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const imgEncode = ref("");
|
||||
const raw = ref("");
|
||||
const canvasUrl = ref("");
|
||||
|
||||
/* @setup */
|
||||
|
||||
/* @method */
|
||||
|
||||
const onClickDown1 = () =>{
|
||||
// const byteCharacters = atob(imgEncode.value);
|
||||
// const byteNumbers = new Array(byteCharacters.length);
|
||||
// for (let i = 0; i < byteCharacters.length; i++) {
|
||||
// byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||||
// }
|
||||
// const byteArray = new Uint8Array(byteNumbers);
|
||||
// const blob = new Blob([byteArray], { type: 'image/jpeg' });
|
||||
// raw.value = byteArray
|
||||
// // 创建可下载链接
|
||||
// const url = URL.createObjectURL(blob);
|
||||
|
||||
// // 创建隐藏的<a>标签
|
||||
// const link = document.createElement('a');
|
||||
// link.href = url;
|
||||
// link.download = 'fileName';
|
||||
|
||||
// // 模拟点击隐藏的<a>标签来触发下载
|
||||
// link.click();
|
||||
|
||||
// // 清理URL对象
|
||||
// URL.revokeObjectURL(url);
|
||||
}
|
||||
const onClickA =() =>{
|
||||
const canvas = document.getElementById('canvas')
|
||||
console.log(canvas.offsetHeight)
|
||||
console.log(canvas.scrollHeight)
|
||||
dd.previewImage({
|
||||
urls: [
|
||||
canvasUrl.value,
|
||||
],
|
||||
current: 1,
|
||||
success: () => {},
|
||||
fail: () => {},
|
||||
complete: () => {},
|
||||
});
|
||||
|
||||
}
|
||||
const onClickDown = () =>{
|
||||
// let options = { scale: 1, allowTaint: false, useCORS: true, width: '375', height: '649', backgroundColor: null }
|
||||
autoPicture('canvas')
|
||||
}
|
||||
const autoPicture = async (el, options) => {
|
||||
// let { scale = 1, allowTaint = false, useCORS = true, width = '375', height = '649', backgroundColor = null } = options
|
||||
const id = document.getElementById(el)
|
||||
// alert(document.getElementById('canvas').offsetWidth
|
||||
const canvas = await html2canvas(id, {
|
||||
scale: 2, //缩放比例,默认为1
|
||||
allowTaint: false, //是否允许跨域图像污染画布
|
||||
useCORS: true, //是否尝试使用CORS从服务器加载图像
|
||||
// width: document.getElementById('canvas').offsetWidth, //画布的宽度
|
||||
// height: document.getElementById('canvas').offsetHeight, //画布的高度
|
||||
width: document.getElementById('canvas').offsetWidth, //画布的宽度
|
||||
height: document.getElementById('canvas').offsetHeight, //画布的高度
|
||||
backgroundColor: null //画布的背景色，默认为透明
|
||||
})
|
||||
// canvas.toDataURL('image/png')
|
||||
// console.log(canvas.toDataURL('image/png'))
|
||||
canvasUrl.value = canvas.toDataURL('image/png')
|
||||
|
||||
|
||||
}
|
||||
// localStorage.setItem('token', 123456)
|
||||
getWhiteCode().then(res =>{
|
||||
console.log(res)
|
||||
imgEncode.value = res.imgEncode
|
||||
// autoPicture(canvas)
|
||||
// raw.value = window.atob(res.imgEncode);
|
||||
setTimeout(()=>{
|
||||
onClickDown()
|
||||
}, 100)
|
||||
|
||||
})
|
||||
|
||||
const onClickDown1 = () => {
|
||||
// const byteCharacters = atob(imgEncode.value);
|
||||
// const byteNumbers = new Array(byteCharacters.length);
|
||||
// for (let i = 0; i < byteCharacters.length; i++) {
|
||||
// byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||||
// }
|
||||
// const byteArray = new Uint8Array(byteNumbers);
|
||||
// const blob = new Blob([byteArray], { type: 'image/jpeg' });
|
||||
// raw.value = byteArray
|
||||
// // 创建可下载链接
|
||||
// const url = URL.createObjectURL(blob);
|
||||
// // 创建隐藏的<a>标签
|
||||
// const link = document.createElement('a');
|
||||
// link.href = url;
|
||||
// link.download = 'fileName';
|
||||
// // 模拟点击隐藏的<a>标签来触发下载
|
||||
// link.click();
|
||||
// // 清理URL对象
|
||||
// URL.revokeObjectURL(url);
|
||||
};
|
||||
const onClickA = () => {
|
||||
const canvas = document.getElementById("canvas");
|
||||
console.log(canvas.offsetHeight);
|
||||
console.log(canvas.scrollHeight);
|
||||
dd.previewImage({
|
||||
urls: [canvasUrl.value],
|
||||
current: 1,
|
||||
success: () => {},
|
||||
fail: () => {},
|
||||
complete: () => {},
|
||||
});
|
||||
};
|
||||
const onClickDown = () => {
|
||||
// let options = { scale: 1, allowTaint: false, useCORS: true, width: '375', height: '649', backgroundColor: null }
|
||||
autoPicture("canvas");
|
||||
};
|
||||
const autoPicture = async (el, options) => {
|
||||
// let { scale = 1, allowTaint = false, useCORS = true, width = '375', height = '649', backgroundColor = null } = options
|
||||
const id = document.getElementById(el);
|
||||
// alert(document.getElementById('canvas').offsetWidth
|
||||
const canvas = await html2canvas(id, {
|
||||
scale: 2, //缩放比例,默认为1
|
||||
allowTaint: false, //是否允许跨域图像污染画布
|
||||
useCORS: true, //是否尝试使用CORS从服务器加载图像
|
||||
// width: document.getElementById('canvas').offsetWidth, //画布的宽度
|
||||
// height: document.getElementById('canvas').offsetHeight, //画布的高度
|
||||
width: document.getElementById("canvas").offsetWidth, //画布的宽度
|
||||
height: document.getElementById("canvas").offsetHeight, //画布的高度
|
||||
backgroundColor: null, //画布的背景色，默认为透明
|
||||
});
|
||||
// canvas.toDataURL('image/png')
|
||||
// console.log(canvas.toDataURL('image/png'))
|
||||
canvasUrl.value = canvas.toDataURL("image/png");
|
||||
};
|
||||
// localStorage.setItem('token', 123456)
|
||||
getWhiteCode().then((res) => {
|
||||
console.log(res);
|
||||
imgEncode.value = res.imgEncode;
|
||||
// autoPicture(canvas)
|
||||
// raw.value = window.atob(res.imgEncode);
|
||||
setTimeout(() => {
|
||||
onClickDown();
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.invitation-model-fixed{
|
||||
<style lang="scss" scoped>
|
||||
.invitation-model-fixed {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: url('../assets/yaoqingbeijingtu.png') left top/100% auto no-repeat;
|
||||
background: #fff;
|
||||
.big-img{
|
||||
.big-img {
|
||||
width: 100%;
|
||||
}
|
||||
.ewm{
|
||||
.ewm {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 4rem /* 300/75 */;
|
||||
top: 4.9rem /* 300/75 */;
|
||||
transform: translateX(-50%);
|
||||
width:4.5333rem /* 340/75 */;
|
||||
width: 4.5333rem /* 340/75 */;
|
||||
height: 4.5333rem /* 340/75 */;
|
||||
}
|
||||
|
||||
}
|
||||
.img-fixed{
|
||||
.img-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
+188
-182
@@ -1,249 +1,257 @@
|
||||
<template>
|
||||
<div class='box'>
|
||||
<div class="box">
|
||||
<header>
|
||||
<div class="header-top">
|
||||
<h1><img src="../assets/userhome/dingsheng.png" alt=""></h1>
|
||||
<img class="h3" src="../assets/userhome/zhiengfangke.png" alt="">
|
||||
<h1><img src="../assets/userhome/dingsheng.png" alt="" /></h1>
|
||||
<img class="h3" src="../assets/userhome/zhiengfangke.png" alt="" />
|
||||
<p>欢迎进入鼎盛无际智能访客系统</p>
|
||||
</div>
|
||||
<div class="plate-box">
|
||||
<div @click="onClickGo('/apply')" class="list">
|
||||
<h4>来访预约</h4>
|
||||
<p>登记来访</p>
|
||||
<img class="icon-arrowhead" src="../assets/userhome/youjiantou.png" alt="">
|
||||
<img class="img" src="../assets/userhome/ren.png" alt="">
|
||||
<img class="icon-arrowhead" src="../assets/userhome/youjiantou.png" alt="" />
|
||||
<img class="img" src="../assets/userhome/ren.png" alt="" />
|
||||
</div>
|
||||
<div @click="onClickGo('/applyRecord')" class="list">
|
||||
<h4>预约记录</h4>
|
||||
<p>记录查询</p>
|
||||
<img class="icon-arrowhead" src="../assets/userhome/youjiantou.png" alt="">
|
||||
<img class="img" src="../assets/userhome/fang.png" alt="">
|
||||
<img class="icon-arrowhead" src="../assets/userhome/youjiantou.png" alt="" />
|
||||
<img class="img" src="../assets/userhome/fang.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content">
|
||||
<div class="contact-box">
|
||||
<h3><span>联系我们 </span><p><b class="square"></b></p> </h3>
|
||||
<h3>
|
||||
<span>联系我们 </span>
|
||||
<p><b class="square"></b></p>
|
||||
</h3>
|
||||
<div class="time">法定工作日 09:00-12:00 14:00-18:00</div>
|
||||
<p @click="onClickCall" class="text-list">
|
||||
<img src="../assets/userhome/dianhua.png" alt="">
|
||||
<img src="../assets/userhome/dianhua.png" alt="" />
|
||||
<span>服务热线：400040-1573</span>
|
||||
</p>
|
||||
<p class="text-list">
|
||||
<img src="../assets/userhome/dingwei.png" alt="">
|
||||
<img src="../assets/userhome/dingwei.png" alt="" />
|
||||
<span>地址：四川省泸州市高新区众创中心12楼</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="controls-box">
|
||||
<img class="icon-img" src="../assets/caozuo.png" >
|
||||
<img class="icon-img" src="../assets/caozuo.png" />
|
||||
<p>操作手册</p>
|
||||
<img class="icon-right" src="../assets/youjiantou.png" alt="">
|
||||
<a href="https://www.yuque.com/zhoupangpang-m5aid/qp94nz/hhvxk757iolg8gah?singleDoc#"></a>
|
||||
<img class="icon-right" src="../assets/youjiantou.png" alt="" />
|
||||
<a
|
||||
href="https://www.yuque.com/zhoupangpang-m5aid/qp94nz/hhvxk757iolg8gah?singleDoc#"
|
||||
></a>
|
||||
</div>
|
||||
<!-- <div><button @click="onClickUpdate">修改token</button></div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import { rulesForm, resetForm, rulesPhone } from '@/com/index'
|
||||
import { getWeChatCode, login } from '../api/user'
|
||||
import { Toast, ImagePreview } from 'vant';
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import { rulesForm, resetForm, rulesPhone } from "@/com/index";
|
||||
import { getWeChatCode, login } from "../api/user";
|
||||
import { Toast, ImagePreview } from "vant";
|
||||
|
||||
/* @data */
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
const url = 'http://visitor.scdswj.cn/?code=071ucW200YtsQR1AUj3007Tabj2ucW26&state=STATE'
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const url = "http://visitor.scdswj.cn/?code=071ucW200YtsQR1AUj3007Tabj2ucW26&state=STATE";
|
||||
/* @setup */
|
||||
// url.split('?')[1].split('&').map(item =>{
|
||||
// if(item.split('=')[0] === 'code'){
|
||||
// // code = item.split('=')[1]
|
||||
// console.log(item.split('=')[1])
|
||||
// alert(item.split('=')[1])
|
||||
// }
|
||||
// })
|
||||
localStorage.setItem('redirect', '/userhome')
|
||||
// url.split('?')[1].split('&').map(item =>{
|
||||
// if(item.split('=')[0] === 'code'){
|
||||
// // code = item.split('=')[1]
|
||||
// console.log(item.split('=')[1])
|
||||
// alert(item.split('=')[1])
|
||||
// }
|
||||
// })
|
||||
localStorage.setItem("redirect", "/userhome");
|
||||
|
||||
/* @method */
|
||||
// const onClickUpdate = () =>{
|
||||
// localStorage.setItem("userToken", 'res.data.authorization');
|
||||
// }
|
||||
const onClickGo = (url = '/userHome') =>{
|
||||
router.push(url)
|
||||
}
|
||||
const onClickCall = () =>{
|
||||
window.location.href = 'tel:400-040-1573'
|
||||
}
|
||||
const onClickMap = () =>{
|
||||
window.location.href = ''
|
||||
}
|
||||
//判断是否是微信内置的浏览器
|
||||
const isWXBrowserFun = ()=> {
|
||||
return (
|
||||
String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ===
|
||||
"micromessenger"
|
||||
);
|
||||
}
|
||||
//截取地址栏code
|
||||
const getUrlCode = (name) =>{
|
||||
if(window.location.href.indexOf(name) === -1) return
|
||||
let code = ''
|
||||
window.location.href.split('?')[1].split('&').map(item =>{
|
||||
if(item.split('=')[0] === name){
|
||||
code = item.split('=')[1]
|
||||
}
|
||||
})
|
||||
return code
|
||||
}
|
||||
//访问微信地址，用来获取code
|
||||
const weChatCode = () =>{
|
||||
getWeChatCode().then(res =>{
|
||||
window.location.href = res.data
|
||||
})
|
||||
}
|
||||
//把code传递给后台接口，静默登录
|
||||
const wxLogin = (code) =>{
|
||||
login(code).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code===200) {
|
||||
localStorage.setItem("userToken", res.data.authorization);
|
||||
Toast.success('登录成功！')
|
||||
} else {
|
||||
Toast.fail('登录失败！')
|
||||
// const onClickUpdate = () =>{
|
||||
// localStorage.setItem("userToken", 'res.data.authorization');
|
||||
// }
|
||||
const onClickGo = (url = "/userHome") => {
|
||||
router.push(url);
|
||||
};
|
||||
const onClickCall = () => {
|
||||
window.location.href = "tel:400-040-1573";
|
||||
};
|
||||
const onClickMap = () => {
|
||||
window.location.href = "";
|
||||
};
|
||||
//判断是否是微信内置的浏览器
|
||||
const isWXBrowserFun = () => {
|
||||
return (
|
||||
String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ===
|
||||
"micromessenger"
|
||||
);
|
||||
};
|
||||
//截取地址栏code
|
||||
const getUrlCode = (name) => {
|
||||
if (window.location.href.indexOf(name) === -1) return;
|
||||
let code = "";
|
||||
window.location.href
|
||||
.split("?")[1]
|
||||
.split("&")
|
||||
.map((item) => {
|
||||
if (item.split("=")[0] === name) {
|
||||
code = item.split("=")[1];
|
||||
}
|
||||
});
|
||||
}
|
||||
return code;
|
||||
};
|
||||
//访问微信地址，用来获取code
|
||||
const weChatCode = () => {
|
||||
getWeChatCode().then((res) => {
|
||||
console.log(res, "地址");
|
||||
window.location.href = res.data;
|
||||
});
|
||||
};
|
||||
//把code传递给后台接口，静默登录
|
||||
const wxLogin = (code) => {
|
||||
login(code).then((res) => {
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
localStorage.setItem("userToken", res.data.authorization);
|
||||
Toast.success("登录成功！");
|
||||
} else {
|
||||
Toast.fail("登录失败！");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const isWXBrowser = isWXBrowserFun();
|
||||
if (isWXBrowser) {
|
||||
const userToken = localStorage.getItem('userToken')
|
||||
if(!userToken){
|
||||
let code = getUrlCode("code");
|
||||
console.log(code)
|
||||
if (code) {
|
||||
wxLogin(code); //后台登录
|
||||
} else {
|
||||
weChatCode(); //微信授权
|
||||
}
|
||||
const isWXBrowser = isWXBrowserFun();
|
||||
if (isWXBrowser) {
|
||||
const userToken = localStorage.getItem("userToken");
|
||||
if (!userToken) {
|
||||
let code = getUrlCode("code");
|
||||
console.log(code);
|
||||
if (code) {
|
||||
wxLogin(code); //后台登录
|
||||
} else {
|
||||
weChatCode(); //微信授权
|
||||
}
|
||||
}else {
|
||||
alert('请在微信中打开！')
|
||||
}
|
||||
} else {
|
||||
alert("请在微信中打开！");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.box{
|
||||
background-color: #F4F5F8;
|
||||
header{
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
background-color: #f4f5f8;
|
||||
header {
|
||||
width: 100%;
|
||||
height: 6.9333rem /* 520/75 */;
|
||||
background: url('../assets/userhome/beijign.png') left top/100% 100% no-repeat;
|
||||
.header-top{
|
||||
background: url("../assets/userhome/beijign.png") left top/100% 100% no-repeat;
|
||||
.header-top {
|
||||
width: 100%;
|
||||
height: 4.1867rem /* 314/75 */;
|
||||
background: url('../assets/userhome/topbeijing.png') left top/100% 100% no-repeat;
|
||||
background: url("../assets/userhome/topbeijing.png") left top/100% 100% no-repeat;
|
||||
|
||||
h1{
|
||||
padding: .7467rem /* 56/75 */ .64rem /* 48/75 */;
|
||||
h1 {
|
||||
padding: 0.7467rem /* 56/75 */ 0.64rem /* 48/75 */;
|
||||
box-sizing: border-box;
|
||||
img{
|
||||
img {
|
||||
width: 2.1333rem /* 160/75 */;
|
||||
height: .5867rem /* 44/75 */;
|
||||
height: 0.5867rem /* 44/75 */;
|
||||
}
|
||||
}
|
||||
.h3{
|
||||
.h3 {
|
||||
width: 3.12rem /* 234/75 */;
|
||||
height: .7733rem /* 58/75 */;
|
||||
margin: 0 0 .2133rem /* 16/75 */ .6667rem /* 50/75 */;
|
||||
height: 0.7733rem /* 58/75 */;
|
||||
margin: 0 0 0.2133rem /* 16/75 */ 0.6667rem /* 50/75 */;
|
||||
}
|
||||
p{
|
||||
line-height: .48rem /* 36/75 */;
|
||||
font-size: .32rem /* 24/75 */;
|
||||
p {
|
||||
line-height: 0.48rem /* 36/75 */;
|
||||
font-size: 0.32rem /* 24/75 */;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #514E4B;
|
||||
padding: 0 0 0 .7467rem /* 56/75 */;
|
||||
color: #514e4b;
|
||||
padding: 0 0 0 0.7467rem /* 56/75 */;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.plate-box{
|
||||
.plate-box {
|
||||
width: 100%;
|
||||
height: 3.3333rem /* 250/75 */;
|
||||
padding: 0 .4267rem /* 32/75 */;
|
||||
padding: 0 0.4267rem /* 32/75 */;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.list{
|
||||
.list {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 3.3333rem /* 250/75 */;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
|
||||
border-radius: .2667rem /* 20/75 */;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
|
||||
border-radius: 0.2667rem /* 20/75 */;
|
||||
opacity: 1;
|
||||
border: .0267rem /* 2/75 */ solid #FFFFFF;
|
||||
h4{
|
||||
padding: .4533rem /* 34/75 */ 0 .1333rem /* 10/75 */ .5067rem /* 38/75 */;
|
||||
border: 0.0267rem /* 2/75 */ solid #ffffff;
|
||||
h4 {
|
||||
padding: 0.4533rem /* 34/75 */ 0 0.1333rem /* 10/75 */ 0.5067rem /* 38/75 */;
|
||||
box-sizing: border-box;
|
||||
line-height: .6133rem /* 46/75 */;
|
||||
line-height: 0.6133rem /* 46/75 */;
|
||||
font-size: $size30;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
}
|
||||
p{
|
||||
line-height: .4533rem /* 34/75 */;
|
||||
font-size: .2933rem /* 22/75 */;
|
||||
p {
|
||||
line-height: 0.4533rem /* 34/75 */;
|
||||
font-size: 0.2933rem /* 22/75 */;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5F6583;
|
||||
padding: 0 0 0 .5333rem /* 40/75 */;
|
||||
color: #5f6583;
|
||||
padding: 0 0 0 0.5333rem /* 40/75 */;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.icon-arrowhead{
|
||||
width: .5333rem /* 40/75 */;
|
||||
height: .5333rem /* 40/75 */;
|
||||
margin: .7733rem /* 58/75 */ 0 0 .4533rem /* 34/75 */;
|
||||
.icon-arrowhead {
|
||||
width: 0.5333rem /* 40/75 */;
|
||||
height: 0.5333rem /* 40/75 */;
|
||||
margin: 0.7733rem /* 58/75 */ 0 0 0.4533rem /* 34/75 */;
|
||||
}
|
||||
.img{
|
||||
.img {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: .3733rem /* 28/75 */;
|
||||
right: 0.3733rem /* 28/75 */;
|
||||
width: 1.5733rem /* 118/75 */;
|
||||
height: 1.8133rem /* 136/75 */;
|
||||
}
|
||||
}
|
||||
.list:first-child{
|
||||
margin-right: .3467rem /* 26/75 */;
|
||||
.list:first-child {
|
||||
margin-right: 0.3467rem /* 26/75 */;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 1.12rem /* 84/75 */ .4rem /* 30/75 */ 0;
|
||||
padding: 1.12rem /* 84/75 */ 0.4rem /* 30/75 */ 0;
|
||||
box-sizing: border-box;
|
||||
.contact-box{
|
||||
.contact-box {
|
||||
width: 100%;
|
||||
height: 4.24rem /* 318/75 */;
|
||||
// background: linear-gradient(261deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
||||
background: url('../assets/userhome/ditu.png') left top/100% 100% no-repeat;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: .2667rem /* 20/75 */ 1.0667rem /* 80/75 */ .2667rem /* 20/75 */ .2667rem /* 20/75 */;
|
||||
h3{
|
||||
background: url("../assets/userhome/ditu.png") left top/100% 100% no-repeat;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0.2667rem /* 20/75 */ 1.0667rem /* 80/75 */ 0.2667rem /* 20/75 */
|
||||
0.2667rem /* 20/75 */;
|
||||
h3 {
|
||||
position: relative;
|
||||
// padding: .48rem /* 36/75 */ .5333rem /* 40/75 */ .2667rem /* 20/75 */;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
span{
|
||||
span {
|
||||
display: block;
|
||||
padding: .48rem /* 36/75 */ 0 0 .5333rem /* 40/75 */ ;
|
||||
padding: 0.48rem /* 36/75 */ 0 0 0.5333rem /* 40/75 */;
|
||||
|
||||
line-height: .6133rem /* 46/75 */;
|
||||
line-height: 0.6133rem /* 46/75 */;
|
||||
font-size: $size30;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
@@ -251,82 +259,81 @@ import { Toast, ImagePreview } from 'vant';
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
p{
|
||||
p {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
.square{
|
||||
.square {
|
||||
position: absolute;
|
||||
bottom: .0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
transform: translateX(-70%) translateY(-20%);
|
||||
width: .24rem /* 18/75 */;
|
||||
height: .24rem /* 18/75 */;
|
||||
background: #30BF78;
|
||||
transform: translateX(-70%) translateY(-20%);
|
||||
width: 0.24rem /* 18/75 */;
|
||||
height: 0.24rem /* 18/75 */;
|
||||
background: #30bf78;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.time{
|
||||
padding: .2667rem /* 20/75 */ 0 0 .5333rem /* 40/75 */;
|
||||
.time {
|
||||
padding: 0.2667rem /* 20/75 */ 0 0 0.5333rem /* 40/75 */;
|
||||
box-sizing: border-box;
|
||||
line-height: .4533rem /* 34/75 */;
|
||||
font-size: .2933rem /* 22/75 */;
|
||||
line-height: 0.4533rem /* 34/75 */;
|
||||
font-size: 0.2933rem /* 22/75 */;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5F6583;
|
||||
margin-bottom: .56rem /* 42/75 */;
|
||||
color: #5f6583;
|
||||
margin-bottom: 0.56rem /* 42/75 */;
|
||||
}
|
||||
.text-list{
|
||||
padding: 0 .64rem /* 48/75 */;
|
||||
.text-list {
|
||||
padding: 0 0.64rem /* 48/75 */;
|
||||
box-sizing: border-box;
|
||||
line-height: .5333rem /* 40/75 */;
|
||||
line-height: 0.5333rem /* 40/75 */;
|
||||
font-size: $size26;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #5F6583;
|
||||
color: #5f6583;
|
||||
display: flex;
|
||||
margin-bottom: .3733rem /* 28/75 */;
|
||||
margin-bottom: 0.3733rem /* 28/75 */;
|
||||
|
||||
img{
|
||||
width: .5333rem /* 40/75 */;
|
||||
height: .5333rem /* 40/75 */;
|
||||
margin-right: .2133rem /* 16/75 */;
|
||||
img {
|
||||
width: 0.5333rem /* 40/75 */;
|
||||
height: 0.5333rem /* 40/75 */;
|
||||
margin-right: 0.2133rem /* 16/75 */;
|
||||
}
|
||||
}
|
||||
}
|
||||
.controls-box{
|
||||
.controls-box {
|
||||
position: relative;
|
||||
height: 1.3333rem /* 100/75 */;
|
||||
background: rgba(255,255,255,0.8);
|
||||
border-radius:.2667rem /* 20/75 */;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 0.2667rem /* 20/75 */;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 .24rem /* 18/75 */ 0 .4533rem /* 34/75 */;
|
||||
padding: 0 0.24rem /* 18/75 */ 0 0.4533rem /* 34/75 */;
|
||||
box-sizing: border-box;
|
||||
margin-top: .32rem /* 24/75 */ ;
|
||||
.icon-img{
|
||||
width: .8533rem /* 64/75 */;
|
||||
height: .8533rem /* 64/75 */;
|
||||
margin-top: 0.32rem /* 24/75 */;
|
||||
.icon-img {
|
||||
width: 0.8533rem /* 64/75 */;
|
||||
height: 0.8533rem /* 64/75 */;
|
||||
}
|
||||
p{
|
||||
p {
|
||||
flex: 1;
|
||||
font-size: $lg-size;
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 500;
|
||||
color: #5F6583;
|
||||
line-height: .5067rem /* 38/75 */;
|
||||
padding: 0 0 0 .24rem /* 18/75 */;
|
||||
color: #5f6583;
|
||||
line-height: 0.5067rem /* 38/75 */;
|
||||
padding: 0 0 0 0.24rem /* 18/75 */;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.icon-right{
|
||||
width: .64rem /* 48/75 */;
|
||||
height: .64rem /* 48/75 */;
|
||||
.icon-right {
|
||||
width: 0.64rem /* 48/75 */;
|
||||
height: 0.64rem /* 48/75 */;
|
||||
}
|
||||
a{
|
||||
a {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -336,5 +343,4 @@ import { Toast, ImagePreview } from 'vant';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
+12
-16
@@ -1,9 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from "path"
|
||||
|
||||
import styleImport, { VantResolve } from 'vite-plugin-style-import';
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import { resolve } from "path";
|
||||
|
||||
import styleImport, { VantResolve } from "vite-plugin-style-import";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
@@ -13,19 +12,17 @@ export default defineConfig({
|
||||
resolves: [VantResolve()],
|
||||
libs: [
|
||||
{
|
||||
libraryName: 'vant',
|
||||
libraryName: "vant",
|
||||
esModule: true,
|
||||
resolveStyle: (name) => `../es/${name}/style`, //https://blog.csdn.net/yunchong_zhao/article/details/123552423
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
}),
|
||||
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',//设置地址：http://localhost
|
||||
host: "0.0.0.0", //设置地址：http://localhost
|
||||
port: 4000, // 设置服务启动端口号
|
||||
hmr: false, // 关闭热更新
|
||||
// open: true, // 设置服务启动时是否自动打开浏览器
|
||||
// cors: true, // 允许跨域
|
||||
// proxy: {
|
||||
@@ -38,10 +35,10 @@ export default defineConfig({
|
||||
// }
|
||||
// }
|
||||
},
|
||||
resolve:{
|
||||
alias:{
|
||||
"@": resolve(__dirname, "src")
|
||||
}
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "src"),
|
||||
},
|
||||
},
|
||||
css: {
|
||||
// css预处理器
|
||||
@@ -52,5 +49,4 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user