Skip to content

C
conferenceLy-screen
提交 3531cce8 authored 作者: FC's avatar FC
浏览文件
操作

Initial commit

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 2450 行增加 和 0 行删除
.gitignore 0 → 100644
浏览文件 @ 3531cce8
.DS_Store
node_modules
/dist
# 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?
README.md 0 → 100644
浏览文件 @ 3531cce8
# communication
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
浏览文件 @ 3531cce8
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
config.js 0 → 100644
浏览文件 @ 3531cce8
/*
* @Description:
* @Version: 2.0
* @Autor: lwq
* @Date: 2021-12-24 10:29:24
*/
/**
* Created by tengteng on 17/12/27.
*/
// 服务地址
// const IP = 'http://120.27.238.48:9788'
// const IP = 'http://hypz.hzswb.cn/confphone'
const IP = 'https://lyfydp.longyou.gov.cn:9443/meeting/api/h5'
// 请求目标服务器域名配置
const DOMAIN_NAME = {
URL_CNODEJS: IP,
};
export default DOMAIN_NAME;
package-lock.json 0 → 100644
浏览文件 @ 3531cce8
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
浏览文件 @ 3531cce8
{
"name": "communication",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.24.0",
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"postcss-px2rem": "^0.3.0",
"qrcodejs2": "0.0.2",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/index.html 0 → 100644
浏览文件 @ 3531cce8
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
src/App.vue 0 → 100644
浏览文件 @ 3531cce8
<template>
<div id="app">
<router-view />
</div>
</template>
<style>
@font-face {
font-family: "Medium";
src: url("./assets/font/Alibaba-PuHuiTi-Medium.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "FZZYJW";
src: url("./assets/font/FZZYJW.TTF");
font-weight: normal;
font-style: normal;
}
#app {
width: 100%;
height: 100%;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
src/assets/reset.css 0 → 100644
浏览文件 @ 3531cce8
html,
body,
div,
span,
applet,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-weight: normal;
vertical-align: baseline;
}
body,
html {
width: 100%;
height: 100%;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul,
li {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
vertical-align: middle;
}
/* custom */
a {
outline: none;
color: #16418a;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
a:focus {
outline: none;
}
input:focus,
select:focus,
textarea:focus {
outline: -webkit-focus-ring-color auto 0;
}
@font-face {
font-family: "FZXBSJW";
src: url('./font/FZXBSJW.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "FZZDHJW";
src: url('./font/fzzdhjw.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DIN-Bold";
src: url('./font/DIN-Bold.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "AlibabaPuHuiTi-Medium";
src: url('./font/Alibaba-PuHuiTi-Medium.ttf');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
src/main.js 0 → 100644
浏览文件 @ 3531cce8
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "amfe-flexible";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from './services/server'
import "./assets/reset.css"
Vue.prototype.$http = axios
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
\ No newline at end of file
src/router/index.js 0 → 100644
浏览文件 @ 3531cce8
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
// { path: '*', redirect: '/qrcode' }, /*默认跳转路由*/
{
name: 'qrcode',
path: "/qrcode",
component: () => import('@/views/qrcode/qrcode')
},
{
name: 'dataView',
path: "/dataView",
component: () => import('@/views/dataView/dataView')
},
{
name: 'qrcode1',
path: "/qrcode1",
component: () => import('../views/blue/signIn.vue')
},
{
name: 'dataView1',
path: "/dataView1",
component: () => import('../views/blue/Statistics.vue')
},
{
name: 'qrcode2',
path: "/qrcode",
component: () => import('../views/red/qrcode.vue')
},
{
name: 'dataView2',
path: "/dataView",
component: () => import('../views/red/dataView.vue')
},
]
const router = new VueRouter({
routes
})
export default router
src/services/axios.js 0 → 100644
浏览文件 @ 3531cce8
import axios from 'axios';
import store from '../store';
import router from '../router';
// import Qs from 'qs';
import baseUrl from '../../config';
// axios.defaults.withCredentials = true;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
}
return config;
}, function (error) {
// 预处理请求错误（error）
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
// 预处理响应错误（error)
// alert(error);
return Promise.reject(error);
});
/**
* 返回axios方法
* @param url（如果传绝对地址则baseURL不会追加到url之前）
* @param method
* @param timeout
* @param data
* @param headers
* @param dataType
* @returns {AxiosPromise}
*/
export default function (url, {
// 不传时，默认参数
method = 'get',
timeout = 60000,
data = {},
params = {},
headers = { 'Content-Type': 'application/json' }, // application/x-www-form-urlencoded;charset=UTF-8;
dataType = 'json'
}) {
const config = {
method: method,
timeout: timeout,
url: url, // 如果URL是完整的，包含域名，则下方的域名不会被拼接
baseURL: baseUrl.URL_CNODEJS, // 域名，在最外层的config.js当中可以修改，请求目标服务器域名配置，结合我们自己的项目，在项目放置到服务器上时，就是将域名替换成192.168.1.3
data: data,
params: params,
headers: headers,
dataType: dataType
};
return axios(config);
}
src/services/server.js 0 → 100644
浏览文件 @ 3531cce8
import axios from "@/services/axios";
const server = {
findByIdNoPersonAndSeatList(data) { // 通过id查询列表
return axios('/phoneProcess/findByIdNoPersonAndSeatList', {
method: 'get',
params: data
})
},
correctQrCode(data) { // 查询二维码
return axios('/phoneProcess/correctQrCode', {
method: 'get',
params: data
})
},
dingDingProcessCount(data) { // 根据会议id查数据
return axios('/phoneProcess/dingDingProcessCount', {
method: 'get',
params: data
})
},
};
export default server;
src/store/index.js 0 → 100644
浏览文件 @ 3531cce8
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
src/views/blue/Statistics.vue 0 → 100644
浏览文件 @ 3531cce8
<template>
<div class="content">
<div class="title" v-if="webInfo.processName && webInfo.processName.length < 18">
<img src="../../assets/image/start_yellow.png" alt />
<!-- <img src="../../assets/image/bai_star.png" alt="" /> -->
<div class="title_text_1">
{{ webInfo.processName ? webInfo.processName : "" }}
</div>
<img src="../../assets/image/start_yellow.png" alt />
<!-- <img src="../../assets/image/bai_star.png" alt="" /> -->
</div>
<div class="title title_padding_80" v-else>
<!-- <img src="../../assets/image/bai_star.png" alt="" /> -->
<img src="../../assets/image/start_yellow.png" alt />
<div class="title_text_2">
{{ webInfo.processName ? webInfo.processName : "" }}
</div>
<!-- <img src="../../assets/image/bai_star.png" alt="" /> -->
<img src="../../assets/image/start_yellow.png" alt />
</div>
<div class="body_wrap">
<div class="body" :style="{
'justify-content': data1.length > 3 ? 'flex-start' : 'space-around',
}" @mouseenter="mouseenterInt" @mouseleave="mouseleaveInt">
<div class="item" :style="{ 'margin-right': data1.length > 3 ? '70px' : '0px' }" v-for="(v, i) in data1" :key="i">
<div class="area_img">
{{ v.areaName ? v.areaName : "暂无信息" }}
</div>
<div class="item_content">
<div class="item_value">
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<span class="yd">
应到：
<span class="p_number">{{
v.behalfNum +
v.laterNum +
v.leaveNum +
v.missedPersonNum +
v.normalSignInNum +
v.personThNum
? v.behalfNum +
v.laterNum +
v.leaveNum +
v.missedPersonNum +
v.normalSignInNum +
v.personThNum
: 0
}}</span>
<span class="people">人</span>
</span>
</div>
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<span class="yd">
实到：
<span class="p_number">{{
v.normalSignInNum + v.behalfNum + v.laterNum + v.personThNum
? v.normalSignInNum +
v.behalfNum +
v.laterNum +
v.personThNum
: 0
}}</span>
<span class="people">人</span>
</span>
</div>
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<span class="yd">
请假：
<span class="p_number">{{
v.leaveNum ? v.leaveNum : 0
}}</span>
<span class="people">人</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
timer: null,
webInfo: "",
fonts: null,
name: "全市贯彻学全市贯彻学",
data1: [
{ name: "区域1", sd: 11, yd: 33, qj: 22 },
{ name: "区域2", sd: 11, yd: 33, qj: 22 },
{ name: "区域2", sd: 11, yd: 33, qj: 22 },
{ name: "区域2", sd: 11, yd: 33, qj: 22 },
],
scrollLeft: 0,
times: null,
};
},
destroyed() {
clearInterval(this.times);
},
computed: {
namechange() {
let arr = [];
let a = this.webInfo.processName ? this.webInfo.processName : "暂无";
// let a = this.name
if (a) {
arr.push(a.split(""));
if (arr[0].length > 20) {
let _str1 = arr[0].slice(0, 20).join("");
let _str2 = arr[0].slice(20, arr[0].length).join("");
this.fonts = 18;
return `${_str1}<br/> ${_str2}`;
} else {
return a;
}
}
return a;
// return this.webInfo.processName
},
},
mounted() {
this.$http
.findByIdNoPersonAndSeatList({ id: this.$route.query.id })
.then((result) => {
this.webInfo = result.data.data;
})
.catch((err) => {
console.log(err);
});
this.$http
.dingDingProcessCount({ processId: this.$route.query.id })
.then((result) => {
console.log(result.data.data);
let params = result.data.data.areaCountList;
params.map((v) => {
v.behalfNum ? v.behalfNum : 0;
v.laterNum ? v.laterNum : 0;
v.leaveNum ? v.leaveNum : 0;
v.missedPersonNum ? v.missedPersonNum : 0;
v.normalSignInNum ? v.normalSignInNum : 0;
});
let list = [];
for (let i = 0; i < params.length; i++) {
if (
params[i].areaName == "市委委员" ||
params[i].areaName == "市委候补委员"
) {
list.push(params[i]);
}
}
this.data1 = list;
})
.catch((err) => {
console.log(err);
});
this.times = setInterval(this.getData, 5000);
this.init();
},
methods: {
getData() {
this.$http
.dingDingProcessCount({ processId: this.$route.query.id })
.then((result) => {
// console.log(result.data.data);
let params = result.data.data.areaCountList;
params.map((v) => {
v.behalfNum ? v.behalfNum : 0;
v.laterNum ? v.laterNum : 0;
v.leaveNum ? v.leaveNum : 0;
v.missedPersonNum ? v.missedPersonNum : 0;
v.normalSignInNum ? v.normalSignInNum : 0;
});
let list = [];
for (let i = 0; i < params.length; i++) {
if (
params[i].areaName == "市委委员" ||
params[i].areaName == "市委候补委员"
) {
list.push(params[i]);
}
}
this.data1 = list;
})
.catch((err) => {
console.log(err);
});
},
init() {
let el1 = document.querySelector(".body");
this.timer = setInterval(() => {
el1.scrollLeft += 1;
if (el1.scrollLeft == this.scrollLeft && this.scrollLeft != 0) {
el1.scrollLeft = 0;
}
this.scrollLeft = el1.scrollLeft;
}, 20);
},
mouseenterInt() {
clearInterval(this.timer);
},
mouseleaveInt() {
// console.log(321);
this.init();
},
},
};
</script>
<style scoped>
.content {
width: 100%;
height: 100%;
/* background: url("../../assets/image/sigin_bg.png");
*/
background: url("../../assets/image/1440x1080.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 150px 160px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.body_wrap {
width: 100%;
/* border: 1px solid red; */
box-sizing: border-box;
padding: 0px 152px;
}
.title_padding_80 {
padding: 0px 80px;
}
.title {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 90px;
}
.margin_b_20 {
margin-top: 20px;
padding-bottom: 44px;
}
.title img {
width: 100px;
height: 41px;
}
.title .title_text_1 {
margin: 0px 16px;
font-size: 58px;
font-stretch: normal;
line-height: 70px;
letter-spacing: 8px;
white-space: normal;
text-shadow: -1px 6px 8px #121d389f;
color: #ffffff;
font-family: FZZYJW;
font-weight: 1060;
/* padding-bottom: 40px; */
}
.title .title_text_2 {
margin: 0px 16px;
font-size: 48px;
font-stretch: normal;
line-height: 70px;
letter-spacing: 6px;
white-space: normal;
/* text-shadow: -1px 4px 5px #121d389f; */
text-shadow: 0px 8px 9px #173fa5;
color: #fff;
font-family: FZZYJW;
font-weight: 1060;
}
.body {
width: 100%;
display: flex;
justify-content: space-evenly;
overflow-x: auto;
/* overflow: -moz-scrollbars-none;
*/
scrollbar-width: none;
}
.item {
width: 480px;
height: 497px;
padding-top: 7px;
box-sizing: border-box;
position: relative;
/* margin-right: 70px; */
}
.item .area_img {
/* background-image: url("../../assets/image/arer_blue.png"); */
background-image: url("../../assets/image/area_green.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 300px;
height: 68px;
/* font-family: FZZDHJW; */
font-size: 30px;
line-height: 68px;
letter-spacing: 4px;
color: #fff;
position: absolute;
top: -7px;
left: calc(50% - 145px);
}
.item .item_content {
/* position: relative; */
width: 480px;
height: 490px;
background-color: #ffffff;
/* box-shadow: 0px 5px 16px 1px rgba(163, 8, 3, 0.267); */
box-shadow: 3px 4px 29px 2px rgba(28, 109, 108, 0.18);
/* box-shadow: 3px 4px 29px 2px #932430; */
border-radius: 6px;
padding: 79px 39px 38px 37px;
box-sizing: border-box;
}
.item .item_value {
width: 100%;
height: 100%;
/* background-color: rgba(233, 223, 182, 0.3); */
/* background-color: rgba(77, 152, 223, 0.14); */
background: #E7FBFF;
border-radius: 4px;
padding: 58px 0 80px 86px;
box-sizing: border-box;
}
.item_value>div {
margin-bottom: 42px;
}
.item_value .point {
width: 12px;
height: 12px;
/* background-color: #3d89d0;
*/
background-color: #0d8eb8;
border-radius: 6px;
margin-top: 20px;
margin-right: 14px;
}
.yd {
font-family: AlibabaPuHuiTi-Medium;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3px;
color: #2f3335;
display: flex;
align-items: flex-end;
line-height: 44px;
}
.p_number {
font-family: DIN-Bold;
font-size: 58px;
color: #0d8eb8;
line-height: 58px;
}
.people {
font-family: AlibabaPuHuiTi-Medium;
font-size: 24px;
color: #0d8eb8;
line-height: 37px;
margin-left: 4px;
}
.body::-webkit-scrollbar {
width: 0px;
}
</style>
\ No newline at end of file
src/views/blue/signIn.vue 0 → 100644
浏览文件 @ 3531cce8
<template>
<div class="content">
<div class="title margin_b_20" v-if="(webInfo.processName && webInfo.processName.length < 18) || true">
<img src="../../assets/image/start_yellow.png" alt />
<div class="title_text_1">
{{ webInfo.processName ? webInfo.processName : "暂无信息" }}
</div>
<img src="../../assets/image/start_yellow.png" alt />
</div>
<div class="title" v-else>
<div class="title_text_2">
{{ webInfo.processName ? webInfo.processName : "暂无信息" }}
</div>
</div>
<div class="qrCode">
<div class="img">
<div id="qrcode" ref="qrcode"></div>
<!-- <qrcode-vue :value="qrcode" size="300" level="H" class="qrcode" /> -->
</div>
<div class="qrCode_font">请使用“浙政钉”扫码签到</div>
</div>
<div class="footer">
<span>地点：{{ webInfo.address ? webInfo.address : "暂无信息" }}</span>
<span>时间：{{ webInfo.startDate ? webInfo.startDate : "暂无信息" }}</span>
</div>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
components: {},
data() {
return {
qr: null,
qrcode: 123,
webInfo: "",
times: "",
};
},
created() {
this.$http
.findByIdNoPersonAndSeatList({ id: this.$route.query.id })
.then((result) => {
this.webInfo = result.data.data;
})
.catch((err) => {
console.log(err);
});
this.$http
.correctQrCode({ qdTimer: new Date().getTime() })
.then((result) => {
this.times = result.data.data;
this.qrcodes();
this.initQrcode();
})
.catch((err) => {
console.log(err);
});
},
methods: {
qrcodes() {
let resultTime = new Date().getTime() + parseInt(this.times);
this.qrcode =
"http://hypz.hzswb.cn/confphone/web/index.html#/qiandao?conferenceId=" +
this.$route.query.id +
"&timeMillis=" +
resultTime;
// this.qrcode =
// "http://120.27.238.48:8080/confphone-new/#/qiandao?conferenceId=" +
// this.$route.query.id +
// "&timeMillis=" +
// resultTime;
},
initQrcode() {
this.$nextTick(() => {
let el1 = document.querySelector(".img");
this.qr = new QRCode("qrcode", {
width: el1.clientWidth - 26,
height: el1.clientHeight - 26,
text: this.qrcode,
});
});
},
},
mounted() {
this.timer = setInterval(() => {
this.qrcodes();
this.qr.makeCode(this.qrcode);
}, 5000);
},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
<style scoped>
.content {
width: 100%;
height: 100%;
/* background: url("../../assets/image/sigin_bg.png"); */
background: url("../../assets/image/1440x1080.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 76px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
padding: 0 38px;
margin-bottom: 30px;
}
.margin_b_20 {
margin-top: 20px;
padding-bottom: 44px;
}
.title .title_text_1 {
margin: 0px 16px;
font-size: 58px;
font-stretch: normal;
line-height: 70px;
letter-spacing: 8px;
white-space: normal;
text-shadow: -1px 6px 8px #121d389f;
color: #0d8eb8;
font-family: FZZYJW;
font-weight: 1060;
-webkit-text-stroke: 0.4px #FFF;
/* padding-bottom: 40px; */
}
.title .title_text_2 {
margin: 0px 16px;
font-size: 48px;
font-stretch: normal;
line-height: 70px;
letter-spacing: 6px;
white-space: normal;
/* text-shadow: -1px 4px 5px #121d389f; */
text-shadow: 0px 8px 9px #173fa5;
color: #0d8eb8;
font-family: FZZYJW;
font-weight: 1060;
-webkit-text-stroke: 0.4px #FFF;
}
.title img {
width: 100px;
height: 41px;
}
.qrCode {
width: 520px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
box-shadow: 3px 4px 29px 2px rgba(147, 36, 48, 0.2);
border-radius: 6px 6px 6px 6px;
padding-top: 16px;
/* border: 1px solid red; */
}
.qrCode .img {
width: 450px;
height: 450px;
/* border: 1px solid red; */
}
.qrCode #qrcode {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.qrCode .qrCode_font {
width: 82%;
font-family: FZXBSJW;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
line-height: 56px;
letter-spacing: 4px;
background-color: #e7fbff;
color: #0d8eb8;
border-radius: 2px 2px 2px 2px;
margin-top: 14px;
margin-bottom: 24px;
}
.footer {
font-family: "Medium" !important;
margin-top: 20px;
display: flex;
flex-direction: column;
font-size: 28px;
font-stretch: normal;
line-height: 46px;
letter-spacing: 3px;
font-weight: 500;
color: #553030;
text-shadow: -1px 6px 8px #121d389f;
}
</style>
\ No newline at end of file
src/views/dataView/dataView.vue 0 → 100644
浏览文件 @ 3531cce8
<template>
<div class="content">
<div class="title margin_b_20" v-if="(webInfo.processName && webInfo.processName.length < 18) || true">
<img src="../../assets/image/start_yellow.png" alt />
<div class="title_text_1">{{ webInfo.processName ? webInfo.processName : "" }}</div>
<img src="../../assets/image/start_yellow.png" alt />
</div>
<div class="title title_padding_80" v-else>
<img src="../../assets/image/start_yellow.png" alt />
<div class="title_text_2">{{ webInfo.processName ? webInfo.processName : "" }}</div>
<img src="../../assets/image/start_yellow.png" alt />
</div>
<div class="body_wrap">
<div class="body" :style="{
'justify-content': data1.length > 3 ? 'flex-start' : 'space-around',
}" @mouseenter="mouseenterInt" @mouseleave="mouseleaveInt">
<div class="item" :style="{ 'margin-right': data1.length > 3 ? '70px' : '0px' }" v-for="(v, i) in data1" :key="i">
<div class="area_img">{{ v.areaName ? v.areaName : "暂无信息" }}</div>
<div class="item_content">
<div class="item_value">
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<span class="yd">
应到：
<span class="p_number">
{{
v.behalfNum +
v.laterNum +
v.leaveNum +
v.missedPersonNum +
v.normalSignInNum +
v.personThNum
? v.behalfNum +
v.laterNum +
v.leaveNum +
v.missedPersonNum +
v.normalSignInNum +
v.personThNum
: 0
}}
</span>
<span class="people">人</span>
</span>
</div>
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<span class="yd">
实到：
<span class="p_number">
{{
v.normalSignInNum + v.behalfNum + v.laterNum + v.personThNum
? v.normalSignInNum +
v.behalfNum +
v.laterNum +
v.personThNum
: 0
}}
</span>
<span class="people">人</span>
</span>
</div>
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<span class="yd">
请假：
<span class="p_number">
{{
v.leaveNum ? v.leaveNum : 0
}}
</span>
<span class="people">人</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
timer: null,
webInfo: '',
fonts: null,
name: '全市贯彻学全市贯彻学',
times: null,
data1: [
{ areaName: '市委委员', sd: 11, yd: 33, qj: 22 },
{ areaName: '老党', sd: 11, yd: 33, qj: 22 },
{ areaName: '市委候补委员', sd: 11, yd: 33, qj: 22 },
],
scrollLeft: 0,
}
},
computed: {
namechange() {
let arr = []
let a = this.webInfo.processName ? this.webInfo.processName : '暂无'
// let a = this.name
if (a) {
arr.push(a.split(''))
if (arr[0].length > 20) {
let _str1 = arr[0].slice(0, 20).join('')
let _str2 = arr[0].slice(20, arr[0].length).join('')
console.log(_str1, _str2)
this.fonts = 18
return `${_str1}<br/> ${_str2}`
} else {
return a
}
}
return a
// return this.webInfo.processName
},
},
mounted() {
this.$http
.findByIdNoPersonAndSeatList({ id: this.$route.query.id })
.then((result) => {
this.webInfo = result.data.data
})
.catch((err) => {
console.log(err)
})
this.$http
.dingDingProcessCount({ processId: this.$route.query.id })
.then((result) => {
// console.log(result.data.data);
let params = result.data.data.areaCountList
params.map((v) => {
v.behalfNum ? v.behalfNum : 0
v.laterNum ? v.laterNum : 0
v.leaveNum ? v.leaveNum : 0
v.missedPersonNum ? v.missedPersonNum : 0
v.normalSignInNum ? v.normalSignInNum : 0
})
let list = []
for (let i = 0; i < params.length; i++) {
// if (
// params[i].areaName == "市委委员" ||
// params[i].areaName == "市委候补委员"
// ) {
list.push(params[i])
// }
}
this.data1 = list
})
.catch((err) => {
console.log(err)
})
this.times = setInterval(this.getData, 5000)
this.init()
},
destroyed() {
clearInterval(this.times)
},
methods: {
getData() {
this.$http
.dingDingProcessCount({ processId: this.$route.query.id })
.then((result) => {
// console.log(result.data.data);
let params = result.data.data.areaCountList
params.map((v) => {
v.behalfNum ? v.behalfNum : 0
v.laterNum ? v.laterNum : 0
v.leaveNum ? v.leaveNum : 0
v.missedPersonNum ? v.missedPersonNum : 0
v.normalSignInNum ? v.normalSignInNum : 0
})
let list = []
for (let i = 0; i < params.length; i++) {
// if (params[i].areaName == '市委委员' || params[i].areaName == '市委候补委员') {
list.push(params[i])
// }
}
this.data1 = list
})
.catch((err) => {
console.log(err)
})
},
init() {
let el1 = document.querySelector('.body')
this.timer = setInterval(() => {
el1.scrollLeft += 1
if (el1.scrollLeft == this.scrollLeft && this.scrollLeft != 0) {
el1.scrollLeft = 0
}
this.scrollLeft = el1.scrollLeft
}, 20)
},
mouseenterInt() {
clearInterval(this.timer)
},
mouseleaveInt() {
// console.log(321);
this.init()
},
},
}
</script>
<style scoped>
.content {
width: 100%;
height: 100%;
/* background: url("../../assets/image/bg2.png"); */
/* background: url("../../assets/image/bg3.jpg"); */
background-image: url('../../assets/image/bg3.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 130px 160px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.title_padding_80 {
padding: 0px 80px;
}
.title {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 80px;
}
.title img {
width: 100px;
height: 41px;
}
.title .title_text_1 {
margin: 0px 16px;
font-size: 58px;
font-stretch: normal;
line-height: 80px;
letter-spacing: 6px;
white-space: normal;
text-shadow: 0px 8px 8px #4e0b0f88;
/* color: #de3232; */
color: #0D8EB8;
font-family: FZZYJW;
/* font-weight: bold; */
font-weight: 1060;
/* -webkit-text-stroke: 0.4px #ffde02; */
-webkit-text-stroke: 0.44px #ffffff;
}
.title .title_text_2 {
margin: 0px 16px;
font-size: 48px;
font-stretch: normal;
line-height: 80px;
letter-spacing: 6px;
white-space: normal;
/* text-shadow: -1px 4px 5px #4e0b0fb9;
*/
text-shadow: 0px 8px 8px #4e0b0f88;
color: #de3232;
/* background: -webkit-linear-gradient(90deg, #fff6ed, #fddfbb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-family: FZZYJW;
/* font-weight: bold; */
font-weight: 1060;
/* -webkit-text-stroke: 0.4px #ffdd02d5;
*/
-webkit-text-stroke: 0.5px #ffffff;
}
.body_wrap {
width: 100%;
/* border: 1px solid red; */
box-sizing: border-box;
padding: 0px 152px;
}
.body {
width: 100%;
display: flex;
justify-content: space-evenly;
overflow-x: auto;
/* overflow: -moz-scrollbars-none;
*/
scrollbar-width: none;
}
.item {
width: 480px;
height: 497px;
padding-top: 7px;
box-sizing: border-box;
position: relative;
/* margin-right: 70px; */
}
.item .area_img {
/* background-image: url('../../assets/image/area.png');
*/
background-image: url('../../assets/image/area_green.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 300px;
height: 68px;
/* font-family: FZZDHJW; */
font-size: 30px;
line-height: 68px;
letter-spacing: 4px;
/* color: #ffd675; */
color: #ffffff;
position: absolute;
top: -7px;
left: calc(50% - 145px);
}
.item .item_content {
/* position: relative; */
width: 480px;
height: 490px;
background-color: #ffffff;
/* box-shadow: 0px 5px 16px 1px rgba(163, 8, 3, 0.267);
*/
/* box-shadow: 3px 4px 29px 2px #932430; */
box-shadow: 3px 4px 29px 2px rgba(28, 109, 108, 0.18);
border-radius: 6px;
padding: 79px 39px 38px 37px;
box-sizing: border-box;
}
.item .item_value {
width: 100%;
height: 100%;
/* background-color: rgba(233, 223, 182, 0.3); */
/* background-color: rgba(245, 136, 136, 0.1); */
border-radius: 4px;
background: #E7FBFF;
padding: 58px 0 80px 86px;
box-sizing: border-box;
}
.item_value>div {
margin-bottom: 42px;
}
.item_value .point {
width: 12px;
height: 12px;
/* background-color: #cc3e3d; */
background-color: #0d8eb8;
border-radius: 6px;
margin-top: 20px;
margin-right: 14px;
}
.yd {
font-family: AlibabaPuHuiTi-Medium;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3px;
color: #2f3335;
display: flex;
align-items: flex-end;
line-height: 44px;
}
.p_number {
font-family: DIN-Bold;
font-size: 58px;
color: #0d8eb8;
line-height: 58px;
}
.people {
font-family: AlibabaPuHuiTi-Medium;
font-size: 24px;
color: #0d8eb8;
line-height: 37px;
margin-left: 4px;
}
.body::-webkit-scrollbar {
width: 0px;
}
.margin_b_20 {
margin-bottom: 20px;
}
</style>
\ No newline at end of file
src/views/qrcode/qrcode.vue 0 → 100644
浏览文件 @ 3531cce8
<template>
<div class="content">
<div class="title margin_b_20" v-if="(webInfo.processName && webInfo.processName.length < 18) || true">
<!-- <img src="../../assets/image/star.png" alt="" /> -->
<img src="../../assets/image/start_yellow.png" alt />
<div class="title_text_1">
{{ webInfo.processName ? webInfo.processName : "暂无信息" }}
</div>
<!-- <img src="../../assets/image/star.png" alt="" /> -->
<img src="../../assets/image/start_yellow.png" alt />
</div>
<div class="title" v-else>
<div class="title_text_2">
{{ webInfo.processName ? webInfo.processName : "暂无信息" }}
</div>
</div>
<div class="qrCode">
<div class="img">
<div id="qrcode" ref="qrcode"></div>
<!-- <qrcode-vue :value="qrcode" size="300" level="H" class="qrcode" /> -->
</div>
<div class="qrCode_font">请使用“浙政钉”扫码签到</div>
</div>
<div class="footer">
<span>地点：{{ webInfo.address ? webInfo.address : "暂无信息" }}</span>
<span>时间：{{ webInfo.startDate ? webInfo.startDate : "暂无信息" }}</span>
</div>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
components: {},
data() {
return {
qr: null,
qrcode: 123,
webInfo: "",
times: "",
};
},
created() {
this.$http
.findByIdNoPersonAndSeatList({ id: this.$route.query.id })
.then((result) => {
this.webInfo = result.data.data;
})
.catch((err) => {
console.log(err);
});
this.$http
.correctQrCode({ qdTimer: new Date().getTime() })
.then((result) => {
this.times = result.data.data;
this.qrcodes();
this.initQrcode();
})
.catch((err) => {
console.log(err);
});
},
methods: {
qrcodes() {
let resultTime = new Date().getTime() + parseInt(this.times);
// this.qrcode =
// "http://hypz.hzswb.cn/confphone/web/index.html#/qiandao?conferenceId=" +
// this.$route.query.id +
// "&timeMillis=" +
// resultTime;
this.qrcode =
"https://lyfydp.longyou.gov.cn:9443/meeting/h5/#/qiandao?conferenceId=" +
this.$route.query.id +
"&timeMillis=" +
resultTime;
// console.log(this.qrcode);
// this.qrcode =
// "http://120.27.238.48:8080/confphone-new/#/qiandao?conferenceId=" +
// this.$route.query.id +
// "&timeMillis=" +
// resultTime;
},
initQrcode() {
this.$nextTick(() => {
let el1 = document.querySelector(".img");
this.qr = new QRCode("qrcode", {
width: el1.clientWidth - 26,
height: el1.clientHeight - 26,
text: this.qrcode,
});
});
},
},
mounted() {
this.timer = setInterval(() => {
this.qrcodes();
this.qr.makeCode(this.qrcode);
}, 5000);
},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
<style scoped>
.content {
width: 100%;
height: 100%;
/* background: url("../../assets/image/bg.png"); */
background: url("../../assets/image/bg3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 76px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
padding: 0 38px;
margin-bottom: 30px;
}
.margin_b_20 {
margin-top: 20px;
padding-bottom: 44px;
}
.title .title_text_1 {
margin: 0px 16px;
font-size: 58px;
font-stretch: normal;
line-height: 70px;
letter-spacing: 6px;
white-space: normal;
/* text-shadow: 0px 8px 8px #4e0b0f88;
*/
/* 设置描边宽度及颜色 默认为字体内外描边 */
text-shadow: 0px 8px 10px rgba(78, 11, 15, 0.44);
color: #0d8eb8;
/* background: -webkit-linear-gradient(90deg, #fff6ed, #fddfbb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-family: FZZYJW;
/* font-weight: bold; */
font-weight: 1200;
/* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
-webkit-text-stroke: 0.4px #FFF;
}
.title .title_text_2 {
margin: 0px 100px;
font-size: 48px;
font-stretch: normal;
line-height: 70px;
letter-spacing: 6px;
white-space: normal;
text-shadow: -1px 4px 5px #4e0b0fb9;
color: #0d8eb8;
/* background: -webkit-linear-gradient(90deg, #fff6ed, #fddfbb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-family: FZZYJW;
/* font-weight: bold; */
font-weight: 1060;
/* -webkit-text-stroke: 0.4px #ffdd02d5;
*/
-webkit-text-stroke: 0.4px #FFF;
}
.title img {
width: 100px;
height: 41px;
}
.qrCode {
width: 520px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
/* box-shadow: 3px 4px 29px 2px rgba(147, 36, 48, 0.2);
*/
box-shadow: 3px 4px 29px 2px rgba(28, 109, 108, 0.18);
border-radius: 6px 6px 6px 6px;
padding-top: 16px;
/* border: 1px solid red; */
}
.qrCode .img {
width: 450px;
height: 450px;
/* border: 1px solid red; */
}
.qrCode #qrcode {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.qrCode .qrCode_font {
width: 82%;
font-family: FZXBSJW;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
line-height: 56px;
letter-spacing: 4px;
/* background: rgba(245, 136, 136, 0.15); */
background-color: #e7fbff;
color: #0d8eb8;
border-radius: 2px 2px 2px 2px;
margin-top: 14px;
margin-bottom: 24px;
}
.footer {
font-family: "Medium" !important;
margin-top: 20px;
display: flex;
flex-direction: column;
font-size: 28px;
font-stretch: normal;
line-height: 46px;
letter-spacing: 3px;
font-weight: 500;
color: #553030;
}
</style>
\ No newline at end of file
src/views/red/dataView.vue 0 → 100644
浏览文件 @ 3531cce8
<template>
<div class="content">
<div class="title margin_b_20" v-if="(webInfo.processName && webInfo.processName.length < 17) || true">
<img src="../../assets/image/huang_star.png" alt />
<div class="title_text_1">{{ webInfo.processName ? webInfo.processName : "暂无会议" }}</div>
<img src="../../assets/image/huang_star.png" alt />
</div>
<div class="title title_padding_80" v-else>
<img src="../../assets/image/huang_star.png" alt />
<div class="title_text_2">{{ webInfo.processName ? webInfo.processName : "" }}</div>
<img src="../../assets/image/huang_star.png" alt />
</div>
<div class="body_wrap">
<div class="body" :style="{
'justify-content': data1.length > 3 ? 'flex-start' : 'space-around',
}" @mouseenter="mouseenterInt" @mouseleave="mouseleaveInt">
<div class="item" :style="{ 'margin-right': data1.length > 3 ? '70px' : '0px' }" v-for="(v, i) in data1" :key="i">
<div class="area_img">{{ v.areaName ? v.areaName : "暂无信息" }}</div>
<div class="item_content">
<div class="item_value">
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<!-- <span class="yd">
应到：
<span class="p_number">{{
v.behalfNum +
v.laterNum +
v.leaveNum +
v.missedPersonNum +
v.normalSignInNum +
v.personThNum
? v.behalfNum +
v.laterNum +
v.leaveNum +
v.missedPersonNum +
v.normalSignInNum +
v.personThNum
: 0
}}</span>
<span class="people">人</span>
</span>-->
<span class="yd">
应到：
<span class="p_number">{{ yingList[i] }}</span>
<span class="people">人</span>
</span>
</div>
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<span class="yd">
实到：
<span class="p_number">
{{
v.normalSignInNum + v.behalfNum + v.laterNum + v.personThNum
? v.normalSignInNum +
v.behalfNum +
v.laterNum +
v.personThNum
: 0
}}
</span>
<span class="people">人</span>
</span>
</div>
<div style="
display: flex;
justify-content: flex-start;
align-items: center;
">
<div class="point"></div>
<span class="yd">
请假：
<!-- <span class="p_number">{{
v.leaveNum ? v.leaveNum : 0
}}</span>-->
<span class="p_number">
{{
v.leaveNum ? v.leaveNum + lateList[i] : lateList[i]
}}
</span>
<span class="people">人</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
timer: null,
webInfo: '',
fonts: null,
name: '全市贯彻学全市贯彻学',
times: null,
yingList: [63, 12],
lateList: [5, 3],
data1: [
{ areaName: '市委委员', sd: 11, yd: 33, qj: 22 },
// { areaName: "老党", sd: 11, yd: 33, qj: 22 },
{ areaName: '市委候补委员', sd: 11, yd: 33, qj: 22 },
],
scrollLeft: 0,
}
},
computed: {
namechange() {
let arr = []
let a = this.webInfo.processName ? this.webInfo.processName : '暂无'
// let a = this.name
if (a) {
arr.push(a.split(''))
if (arr[0].length > 20) {
let _str1 = arr[0].slice(0, 20).join('')
let _str2 = arr[0].slice(20, arr[0].length).join('')
console.log(_str1, _str2)
this.fonts = 18
return `${_str1}<br/> ${_str2}`
} else {
return a
}
}
return a
// return this.webInfo.processName
},
},
mounted() {
this.$http
.findByIdNoPersonAndSeatList({ id: this.$route.query.id })
.then((result) => {
this.webInfo = result.data.data
})
.catch((err) => {
console.log(err)
})
this.$http
.dingDingProcessCount({ processId: this.$route.query.id })
.then((result) => {
// console.log(result.data.data);
let params = result.data.data.areaCountList
params.map((v) => {
v.behalfNum ? v.behalfNum : 0
v.laterNum ? v.laterNum : 0
v.leaveNum ? v.leaveNum : 0
v.missedPersonNum ? v.missedPersonNum : 0
v.normalSignInNum ? v.normalSignInNum : 0
})
let list = []
for (let i = 0; i < params.length; i++) {
// if (params[i].areaName == '市委委员' || params[i].areaName == '市委候补委员') {
list.push(params[i])
// }
}
this.data1 = list
})
.catch((err) => {
console.log(err)
})
this.times = setInterval(this.getData, 5000)
this.init()
},
destroyed() {
clearInterval(this.times)
},
methods: {
getData() {
this.$http
.dingDingProcessCount({ processId: this.$route.query.id })
.then((result) => {
// console.log(result.data.data);
let params = result.data.data.areaCountList
params.map((v) => {
v.behalfNum ? v.behalfNum : 0
v.laterNum ? v.laterNum : 0
v.leaveNum ? v.leaveNum : 0
v.missedPersonNum ? v.missedPersonNum : 0
v.normalSignInNum ? v.normalSignInNum : 0
})
// this.data1 = params;
let list = []
for (let i = 0; i < params.length; i++) {
// if (
// params[i].areaName == "市委委员" ||
// params[i].areaName == "市委候补委员"
// ) {
list.push(params[i])
// }
}
this.data1 = list
})
.catch((err) => {
console.log(err)
})
},
init() {
let el1 = document.querySelector('.body')
this.timer = setInterval(() => {
el1.scrollLeft += 1
if (el1.scrollLeft == this.scrollLeft && this.scrollLeft != 0) {
el1.scrollLeft = 0
}
this.scrollLeft = el1.scrollLeft
}, 20)
},
mouseenterInt() {
clearInterval(this.timer)
},
mouseleaveInt() {
// console.log(321);
this.init()
},
},
}
</script>
<style scoped>
.content {
width: 100%;
height: 100%;
/* background: url('../../assets/image/red_bg.png'); */
background: url("../../assets/image/bg3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 130px 160px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.title_padding_80 {
padding: 0px 80px;
}
.title {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 80px;
}
.title img {
/* width: 100px;
height: 41px; */
}
.title .title_text_1 {
margin: 0px 16px;
font-size: 60px;
font-stretch: normal;
line-height: 80px;
letter-spacing: 6px;
white-space: normal;
text-shadow: 0px 8px 8px #4e0b0f88;
color: white;
/* background: -webkit-linear-gradient(90deg, #fff6ed, #fddfbb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-family: FZZYJW;
/* font-weight: bold; */
font-weight: 1060;
/* -webkit-text-stroke: 0.4px #ffde02; */
-webkit-text-stroke: 0.4px #FFF;
}
.title .title_text_2 {
margin: 0px 16px;
font-size: 48px;
font-stretch: normal;
line-height: 80px;
letter-spacing: 6px;
white-space: normal;
text-shadow: -1px 4px 5px #4e0b0fb9;
color: #de3232;
/* background: -webkit-linear-gradient(90deg, #fff6ed, #fddfbb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-family: FZZYJW;
/* font-weight: bold; */
font-weight: 1060;
/* -webkit-text-stroke: 0.4px #ffdd02d5; */
-webkit-text-stroke: 0.4px #FFF;
}
.body_wrap {
width: 100%;
/* border: 1px solid red; */
box-sizing: border-box;
/* padding: 0px 152px; */
}
.body {
width: 100%;
display: flex;
justify-content: space-evenly;
overflow-x: auto;
/* overflow: -moz-scrollbars-none;
*/
scrollbar-width: none;
}
.item {
width: 480px;
height: 497px;
padding-top: 7px;
box-sizing: border-box;
position: relative;
/* margin-right: 70px; */
}
.item .area_img {
background-image: url('../../assets/image/area_red.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 300px;
height: 68px;
font-family: FZZDHJW;
font-size: 30px;
line-height: 68px;
letter-spacing: 4px;
color: white;
position: absolute;
top: -7px;
left: calc(50% - 145px);
}
.item .item_content {
/* position: relative; */
width: 480px;
height: 490px;
background-color: #ffffff;
box-shadow: 0px 5px 16px 1px rgba(163, 8, 3, 0.267);
/* box-shadow: 3px 4px 29px 2px #932430; */
border-radius: 6px;
padding: 79px 39px 38px 37px;
box-sizing: border-box;
}
.item .item_value {
width: 100%;
height: 100%;
/* background-color: rgba(233, 223, 182, 0.3); */
background-color: rgb(248, 246, 232);
border-radius: 4px;
padding: 58px 0 80px 86px;
box-sizing: border-box;
}
.item_value>div {
margin-bottom: 42px;
}
.item_value .point {
width: 12px;
height: 12px;
background-color: #cc3e3d;
border-radius: 6px;
margin-top: 20px;
margin-right: 14px;
}
.yd {
font-family: AlibabaPuHuiTi-Medium;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3px;
color: #2f3335;
display: flex;
align-items: flex-end;
line-height: 44px;
}
.p_number {
font-family: DIN-Bold;
font-size: 58px;
color: #cc3e3d;
line-height: 58px;
}
.people {
font-family: AlibabaPuHuiTi-Medium;
font-size: 24px;
color: #cc3e3d;
line-height: 37px;
margin-left: 4px;
}
.body::-webkit-scrollbar {
width: 0px;
}
.margin_b_20 {
margin-bottom: 20px;
}
</style>
\ No newline at end of file
src/views/red/qrcode.vue 0 → 100644
浏览文件 @ 3531cce8
<template>
<div class="content">
<div class="title margin_b_20" v-if="(webInfo.processName && webInfo.processName.length < 18) || true">
<img src="../../assets/image/huang_star.png" alt="" />
<div class="title_text_1">
{{ webInfo.processName ? webInfo.processName : "暂无信息" }}
</div>
<img src="../../assets/image/huang_star.png" alt="" />
</div>
<div class="title" v-else>
<div class="title_text_2">
{{ webInfo.processName ? webInfo.processName : "暂无信息" }}
</div>
</div>
<div class="qrCode">
<div class="img">
<div id="qrcode" ref="qrcode"></div>
<!-- <qrcode-vue :value="qrcode" size="300" level="H" class="qrcode" /> -->
</div>
<div class="qrCode_font">请使用“浙政钉”扫码签到</div>
</div>
<div class="footer">
<span>地点：{{ webInfo.address ? webInfo.address : "暂无信息" }}</span>
<span>时间：{{ webInfo.startDate ? webInfo.startDate : "暂无信息" }}</span>
</div>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
components: {},
data() {
return {
qr: null,
qrcode: 123,
webInfo: "",
times: "",
};
},
created() {
this.$http
.findByIdNoPersonAndSeatList({ id: this.$route.query.id })
.then((result) => {
this.webInfo = result.data.data;
})
.catch((err) => {
console.log(err);
});
this.$http
.correctQrCode({ qdTimer: new Date().getTime() })
.then((result) => {
this.times = result.data.data;
this.qrcodes();
this.initQrcode();
})
.catch((err) => {
console.log(err);
});
},
methods: {
qrcodes() {
let resultTime = new Date().getTime() + parseInt(this.times);
this.qrcode =
"http://hypz.hzswb.cn/confphone/web/index.html#/qiandao?conferenceId=" +
this.$route.query.id +
"&timeMillis=" +
resultTime;
console.log(this.qrcode);
// this.qrcode =
// "http://120.27.238.48:8080/confphone-new/#/qiandao?conferenceId=" +
// this.$route.query.id +
// "&timeMillis=" +
// resultTime;
},
initQrcode() {
this.$nextTick(() => {
let el1 = document.querySelector(".img");
this.qr = new QRCode("qrcode", {
width: el1.clientWidth - 26,
height: el1.clientHeight - 26,
text: this.qrcode,
});
});
},
},
mounted() {
this.timer = setInterval(() => {
this.qrcodes();
this.qr.makeCode(this.qrcode);
}, 5000);
},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
<style scoped>
.content {
width: 100%;
height: 100%;
/* background: url("../../assets/image/red_bg.png"); */
background: url("../../assets/image/bg3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 76px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
padding: 0 38px;
margin-bottom: 30px;
}
.margin_b_20 {
margin-top: 20px;
padding-bottom: 44px;
}
.title .title_text_1 {
margin: 0px 16px;
font-size: 60px;
font-stretch: normal;
line-height: 70px;
letter-spacing: 6px;
white-space: normal;
text-shadow: 0px 8px 8px #4e0b0f88;
color: white;
/* background: -webkit-linear-gradient(90deg, #fff6ed, #fddfbb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-family: FZZYJW;
/* font-weight: bold; */
font-weight: 1200;
/* -webkit-text-stroke: 0.4px #ffde02; */
-webkit-text-stroke: 0.4px #FFF;
}
.title .title_text_2 {
margin: 0px 100px;
font-size: 48px;
font-stretch: normal;
line-height: 70px;
letter-spacing: 6px;
white-space: normal;
text-shadow: -1px 4px 5px #4e0b0fb9;
color: #de3232;
/* background: -webkit-linear-gradient(90deg, #fff6ed, #fddfbb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
font-family: FZZYJW;
/* font-weight: bold; */
font-weight: 1060;
/* -webkit-text-stroke: 0.4px #ffdd02d5; */
-webkit-text-stroke: 0.4px #FFF;
}
.title img {
/* width: 100px;
height: 41px; */
}
.qrCode {
width: 520px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
box-shadow: 3px 4px 29px 2px rgba(147, 36, 48, 0.2);
border-radius: 6px 6px 6px 6px;
padding-top: 16px;
/* border: 1px solid red; */
}
.qrCode .img {
width: 450px;
height: 450px;
/* border: 1px solid red; */
}
.qrCode #qrcode {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.qrCode .qrCode_font {
width: 82%;
font-family: FZXBSJW;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
line-height: 56px;
letter-spacing: 4px;
background: rgba(245, 136, 136, 0.15);
color: #d62929;
border-radius: 2px 2px 2px 2px;
margin-top: 14px;
margin-bottom: 24px;
}
.footer {
font-family: "Medium" !important;
margin-top: 20px;
display: flex;
flex-direction: column;
font-size: 28px;
font-stretch: normal;
line-height: 46px;
letter-spacing: 3px;
font-weight: 500;
color: #553030;
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
浏览文件 @ 3531cce8
module.exports = {
// 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
publicPath: './',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
integrity: false,
// css相关配置
css: {
loaderOptions: {
postcss: {
plugins: [
// 设计稿宽度的1/10，一般为75
require('postcss-px2rem')({ remUnit: 108 }),
]
}
}
},
// PWA 插件相关配置
pwa: {},
// webpack-dev-server 相关配置
pluginOptions: {
}
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论