From 8edf0fc193df875b6e05d77be428e9134438857b Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期二, 16 八月 2022 19:32:54 +0800
Subject: [PATCH] Default Changelist
---
.env.development | 33 +
src/layout/navBars/breadcrumb/user.vue | 2
src/views/intellectInspect/intelligentLine/index.vue | 899 +++++++++++++++++++++++++-------------
src/api/intelligentLine/index.ts | 2
src/views/specialWorkSystem/workApplyManage/workTicket/index.vue | 24
src/assets/avator.png | 0
src/views/newHome/index.vue | 399 +++++++++++++---
7 files changed, 937 insertions(+), 422 deletions(-)
diff --git a/.env.development b/.env.development
index e7c761b..3a4f750 100644
--- a/.env.development
+++ b/.env.development
@@ -4,11 +4,11 @@
#VITE_API_URL = 'http://192.168.0.35:8008'
#李宇飞接口地址
-VITE_API_URL = 'http://192.168.0.50:8008'
+#VITE_API_URL = 'http://192.168.0.50:8008'
#张凤接口地址
-#VITE_API_URL = 'http://192.168.0.29:8008'
-#黄振接口地址
+VITE_API_URL = 'http://192.168.0.29:8008'
+#黄振接口dev地址
#VITE_API_URL = 'http://192.168.0.179:8008'
#施正红接口地址
@@ -16,10 +16,7 @@
#VITE_API_URL = 'http://192.168.0.69:8008'
#戚会山接口地址
-#VITE_API_URL = 'http://192.168.0.52:8011/safeplatform'
-#本地测试接口地址
-
-#VITE_API_URL_OUT = 'http://192.168.0.52:8011/safeplatform-out'
+#VITE_API_URL_OUT = 'http://192.168.0.52:7021/safeplatform-out'
#本地外包测试接口地址
#VITE_API_URL = 'http://121.239.169.27:16006/safeplatform'
@@ -28,5 +25,23 @@
#VITE_API_URL_OUT = 'http://121.239.169.27:16006/safeplatform-out'
#线上正式环境外包接口地址
-VITE_API_URL_SOCKET = 'http://192.168.0.29:8018'
-#黄振websocket接口地址
\ No newline at end of file
+#VITE_API_URL = 'http://192.168.0.52:8011/safeplatform'
+#本地预发接口地址
+
+#VITE_API_URL_OUT = 'http://192.168.0.52:8011/safeplatform-out'
+#本地外包预发接口地址
+
+#VITE_API_URL_SOCKET = 'http://192.168.0.29:8018'
+#黄振websocket接口地址
+
+#VITE_API_URL = 'http://192.168.0.52:7021/safeplatform'
+#本地测试接口地址
+
+VITE_API_URL_SOCKET = 'http://192.168.0.52:7021/safeplatform'
+#本地测试websocket接口地址
+
+#VITE_API_URL = 'http://192.168.0.29:7008'
+#黄振接口test地址
+
+#VITE_API_URL_SOCKET = 'http://192.168.0.29:16107'
+#黄振websocket test接口地址
diff --git a/src/api/intelligentLine/index.ts b/src/api/intelligentLine/index.ts
index 9c11ce2..26f2529 100644
--- a/src/api/intelligentLine/index.ts
+++ b/src/api/intelligentLine/index.ts
@@ -15,7 +15,7 @@
getUrl: () => {
// debugger
return request({
- url: import.meta.env.VITE_API_URL_SOCKET + `/ws/namesrv/get/one`,
+ url: import.meta.env.VITE_API_URL_SOCKET + `/ws/namesrv/get/one?srv=safeplatform-websocket`,
method: 'get'
});
}
diff --git a/src/assets/avator.png b/src/assets/avator.png
new file mode 100644
index 0000000..3d7f367
--- /dev/null
+++ b/src/assets/avator.png
Binary files differ
diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue
index 5a46abf..5a26dde 100644
--- a/src/layout/navBars/breadcrumb/user.vue
+++ b/src/layout/navBars/breadcrumb/user.vue
@@ -57,7 +57,7 @@
</div>
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
<span class="layout-navbars-breadcrumb-user-link">
- <img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+ <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5" style="width: 24px;height: 24px"/>
{{ userInfos.userName }}
<el-icon class="el-icon--right">
<ele-ArrowDown />
diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue
index 15d473e..8581867 100644
--- a/src/views/intellectInspect/intelligentLine/index.vue
+++ b/src/views/intellectInspect/intelligentLine/index.vue
@@ -142,7 +142,7 @@
const res = await lineApi().getUrl();
if (res.data.code === '200') {
state.path = 'http://' + res.data.data.ip + ':' + res.data.data.port + '/ws/test/'
- if (typeof window.WebSocket === 'undefined') {
+ if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持socket');
} else {
// 实例化socket
@@ -152,7 +152,7 @@
console.log(url,'url',uid,'uid')
url = url.replace('https', 'ws').replace('http', 'ws');
console.log(url, '获取地址');
- state.socket = new window.WebSocket(url);
+ state.socket = new WebSocket(url);
// 监听socket连接
state.socket.onopen = () => {
console.log('socket连接成功');
@@ -229,120 +229,605 @@
};
}
};
-// export default {
-// name: 'NewForm',
-// props: {
-//
-// },
-// data(){
-// return{
-// present: '',
-// isScreenfull: false,
-// path: "http://192.168.0.29:8008/ws/test/",
-// socket: null,
-// socketData: '',
-// data: []
-// }
-// },
-// created() {
-// setInterval(() => {
-// this.present = new Date().toLocaleString()
-// }, 1000)
-// },
-// mounted () {
-// // 初始化
-// this.init()
-// // this.getLine()
-// },
-// methods:{
-// goBack(){
-// window.history.go(-1)
-// },
-//
-// async getLine (){
-// let res = await lineApi().getLine({ id: '80647416891768832' });
-// if (res.data.code === '200') {
-// console.log(res.data.data,'获取巡检点')
-// this.data = res.data.data
-// console.log(this.data,'---')
-// } else {
-// ElMessage({
-// type: 'warning',
-// message: res.data.msg
-// });
-// }
-// },
-//
-// // 全屏点击时
-// onScreenfullClick(){
-// const t = this
-// if (!screenfull.isEnabled) {
-// ElMessage.warning('暂不不支持全屏');
-// return false;
-// }
-// screenfull.toggle();
-// screenfull.on('change', () => {
-// if (screenfull.isFullscreen) {
-// t.isScreenfull = true
-// }
-// else{
-// t.isScreenfull = false
-// }
-// });
-// },
-//
-// // socket获取数据
-// init: function () {
-// if(typeof(window.WebSocket) === "undefined"){
-// alert("您的浏览器不支持socket")
-// }else{
-// // 实例化socket
-// var url = this.path + '80938081556545536'
-// url = url.replace("https","ws").replace("http","ws");
-// console.log(url,'获取地址')
-// this.socket = new window.WebSocket(url)
-// // 监听socket连接
-// this.socket.onopen = this.open
-// // 监听socket错误信息
-// this.socket.onerror = this.error
-// // 监听socket消息
-// this.socket.onmessage = this.getMessage
-// }
-// },
-// open: function () {
-// console.log("socket连接成功")
-// },
-// error: function () {
-// console.log("连接错误")
-// },
-// getMessage: function (msg) {
-// console.log(typeof msg.data,'type')
-// if(msg.data =='连接成功') return
-// this.socketData = msg.data
-// console.log(JSON.parse(this.socketData),'------------------',)
-// if(typeof JSON.parse(this.socketData) == Array){
-// this.data = JSON.parse(this.socketData)
-// console.log(this.data)
-// }
-// // console.log(msg,'msg')
-// // console.log(this.data,'data-------')
-// },
-// send: function () {
-// this.socket.send(params)
-// },
-// close: function () {
-// console.log("socket已经关闭")
-// }
-// },
-// destroyed () {
-// // 销毁监听
-// this.socket.onclose = this.close
-// }
-// }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
+ @media screen and (min-width: 1366px) {
+ .big-title {
+ font-size: 28px;
+ margin: 10px 0 20px;
+ }
+ .btns {
+ position: absolute;
+ z-index: 99999;
+ right: 60px;
+ top: 40px;
+ div {
+ font-size: 16px;
+ color: #00ffff;
+ }
+ }
+ .line-item {
+ width: calc((100vw - 40px) / 6);
+ padding-left: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-right: 20px;
+ flex-wrap: nowrap;
+
+ .picbox {
+ width: 100%;
+ height: 180px;
+ padding: 10px;
+ margin-bottom: 40px;
+ box-sizing: border-box;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100px;
+ margin-bottom: 8px;
+ border-radius: 4px;
+ }
+ p {
+ font-size: 14px;
+ white-space: nowrap;
+ color: rgba(255, 255, 255, 0.8);
+ margin-top: 10px;
+ span {
+ color: #fff;
+ }
+ }
+ }
+ }
+ .item {
+ width: calc((100vw - 40px) / 6);
+ height: calc((100vh - 130px) / 5);
+ padding: 0 20px 20px 50px;
+ position: relative;
+ box-sizing: border-box;
+ border-left: 1px solid #36fcfc;
+
+ &:last-of-type {
+ border: none;
+ }
+
+ section {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ position: absolute;
+ border: 1px solid rgba(0, 225, 255, 0.6);
+ top: -12px;
+ left: 10px;
+
+ .dot {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ left: 5px;
+ top: 5px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border: 1px solid #0072ff;
+ border-radius: 50%;
+ background-color: #00e1ff;
+ z-index: 2;
+ }
+ .pulse {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn 2s ease-out;
+ -moz-animation: warn 2s ease-out;
+ animation: warn 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ .pulse1 {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn1 2s ease-out;
+ -moz-animation: warn1 2s ease-out;
+ animation: warn1 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ }
+ & > div {
+ padding: 10px 0;
+ transform: translateY(-14px);
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+ border: 1px solid rgba(54, 252, 252, 1);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ div {
+ margin-bottom: 5px;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ span {
+ display: inline-block;
+ white-space: nowrap;
+ width: 50%;
+ font-size: 13px;
+ color: #fff;
+ text-align: left;
+
+ &:first-of-type {
+ text-align: right;
+ color: rgba(255, 255, 255, 0.8);
+ }
+ }
+ }
+ }
+ .noBorder{
+ border: 1px solid rgba(54, 252, 252, 0.1);
+ }
+ .redBorder{
+ border: 1px solid #ff0000;
+ }
+ p {
+ width: 140px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 48px;
+ text-align: center;
+ color: #fff;
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+ border: 1px solid rgba(54, 252, 252, 0.6);
+ }
+ }
+ .finish-point {
+ position: absolute;
+ width: 90px;
+ height: 90px;
+ border: 2px solid #0072ff;
+ left: -30px;
+ top: -45px;
+ border-radius: 50%;
+
+ & > div {
+ width: 80px;
+ height: 80px;
+ position: absolute;
+ left: 3px;
+ top: 3px;
+ background: #0072ff;
+ border-radius: 50%;
+ color: #fff;
+ font-size: 16px;
+ line-height: 80px;
+ text-align: center;
+ font-weight: bolder;
+ }
+ }
+ }
+
+ @media screen and (min-width: 1200px) and (max-width: 1366px){
+ .big-title {
+ font-size: 28px;
+ margin: 10px 0 20px;
+ }
+ .btns {
+ position: absolute;
+ z-index: 99999;
+ right: 40px;
+ top: 40px;
+ div {
+ font-size: 14px;
+ color: #00ffff;
+ }
+ }
+ .line-item {
+ width: calc((100vw - 40px) / 5);
+ padding-left: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-right: 20px;
+ flex-wrap: nowrap;
+ .picbox {
+ width: 100%;
+ height: 180px;
+ padding: 10px;
+ margin-bottom: 40px;
+ box-sizing: border-box;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100px;
+ margin-bottom: 6px;
+ border-radius: 4px;
+ }
+ p {
+ font-size: 14px;
+ white-space: nowrap;
+ color: rgba(255, 255, 255, 0.8);
+ margin-top: 10px;
+ span {
+ color: #fff;
+ }
+ }
+ }
+ }
+ .item {
+ width: calc((100vw - 40px) / 5);
+ height: calc((100vh - 130px) / 5);
+ padding: 0 20px 20px 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-left: 1px solid #36fcfc;
+
+ &:last-of-type {
+ border: none;
+ }
+
+ section {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ position: absolute;
+ border: 1px solid rgba(0, 225, 255, 0.6);
+ top: -12px;
+ left: 10px;
+
+ .dot {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ left: 5px;
+ top: 5px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border: 1px solid #0072ff;
+ border-radius: 50%;
+ background-color: #00e1ff;
+ z-index: 2;
+ }
+ .pulse {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn 2s ease-out;
+ -moz-animation: warn 2s ease-out;
+ animation: warn 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ .pulse1 {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn1 2s ease-out;
+ -moz-animation: warn1 2s ease-out;
+ animation: warn1 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ }
+ & > div {
+ width: 90%;
+ padding: 10px 0;
+ transform: translateY(-14px);
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+ border: 1px solid rgba(54, 252, 252, 1);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ div {
+ width: 100%;
+ margin-bottom: 5px;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ span {
+ display: inline-block;
+ white-space: nowrap;
+ width: 50%;
+ font-size: 13px;
+ color: #fff;
+ text-align: left;
+
+ &:first-of-type {
+ text-align: right;
+ color: rgba(255, 255, 255, 0.8);
+ }
+ }
+ }
+ }
+ .noBorder{
+ border: 1px solid rgba(54, 252, 252, 0.1);
+ }
+ .redBorder{
+ border: 1px solid #ff0000;
+ }
+ p {
+ width: 140px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 48px;
+ text-align: center;
+ color: #fff;
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+ border: 1px solid rgba(54, 252, 252, 0.6);
+ }
+ }
+ .finish-point {
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ border: 1px solid #0072ff;
+ left: -20px;
+ top: -40px;
+ border-radius: 50%;
+
+ & > div {
+ width: 70px;
+ height: 70px;
+ position: absolute;
+ left: 4px;
+ top: 4px;
+ background: #0072ff;
+ border-radius: 50%;
+ color: #fff;
+ font-size: 14px;
+ line-height: 70px;
+ text-align: center;
+ font-weight: bolder;
+ }
+ }
+ }
+
+ @media screen and (max-width: 1200px){
+ .big-title {
+ font-size: 20px;
+ margin: 5px 0 10px;
+ }
+ .btns {
+ position: absolute;
+ z-index: 99999;
+ right: 20px;
+ top: 40px;
+ div {
+ font-size: 12px;
+ color: #00ffff;
+ }
+ }
+ .line-item {
+ width: 20vw;
+ padding-left: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-right: 20px;
+ flex-wrap: nowrap;
+ .picbox {
+ width: 100%;
+ height: 160px;
+ padding: 10px;
+ margin-bottom: 30px;
+ box-sizing: border-box;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 80px;
+ margin-bottom: 10px;
+ border-radius: 4px;
+ }
+ p {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.8);
+ margin-top: 6px;
+ span {
+ color: #fff;
+ }
+ }
+ }
+ }
+ .item {
+ width: 20vw;
+ height: calc((100vh - 130px) / 5);
+ padding: 0 0 20px 30px;
+ position: relative;
+ box-sizing: border-box;
+ border-left: 1px solid #36fcfc;
+
+ &:last-of-type {
+ border: none;
+ }
+
+ section {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ position: absolute;
+ border: 1px solid rgba(0, 225, 255, 0.6);
+ top: -12px;
+ left: 2px;
+
+ .dot {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ left: 5px;
+ top: 5px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border: 1px solid #0072ff;
+ border-radius: 50%;
+ background-color: #00e1ff;
+ z-index: 2;
+ }
+ .pulse {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn 2s ease-out;
+ -moz-animation: warn 2s ease-out;
+ animation: warn 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ .pulse1 {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn1 2s ease-out;
+ -moz-animation: warn1 2s ease-out;
+ animation: warn1 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ }
+ & > div {
+ width: 80%;
+ padding: 4px 0;
+ transform: translateY(-14px);
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+ border: 1px solid rgba(54, 252, 252, 1);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ div {
+ width: 100%;
+ margin-bottom: 2px;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ span {
+ width: 50%;
+ display: inline-block;
+ white-space: nowrap;
+ font-size: 12px;
+ color: #fff;
+ text-align: left;
+
+ &:first-of-type {
+ text-align: right;
+ color: rgba(255, 255, 255, 0.8);
+ }
+ }
+ }
+ }
+ .noBorder{
+ border: 1px solid rgba(54, 252, 252, 0.1);
+ }
+ .redBorder{
+ border: 1px solid #ff0000;
+ }
+ p {
+ width: 140px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 48px;
+ text-align: center;
+ color: #fff;
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+ border: 1px solid rgba(54, 252, 252, 0.6);
+ }
+ }
+ .finish-point {
+ position: absolute;
+ width: 70px;
+ height: 70px;
+ border: 1px solid #0072ff;
+ left: -10px;
+ top: -35px;
+ border-radius: 50%;
+
+ & > div {
+ width: 60px;
+ height: 60px;
+ position: absolute;
+ left: 4px;
+ top: 4px;
+ background: #0072ff;
+ border-radius: 50%;
+ color: #fff;
+ font-size: 12px;
+ line-height: 60px;
+ text-align: center;
+ font-weight: bolder;
+ }
+ }
+ }
+
@keyframes warn {
0% {
transform: scale(0.3);
@@ -434,9 +919,7 @@
.big-title {
height: 40px;
line-height: 40px;
- font-size: 28px;
font-weight: bold;
- margin: 10px 0 20px;
text-align: center;
color: #fff;
display: flex;
@@ -444,10 +927,6 @@
justify-content: center;
}
.btns {
- position: absolute;
- z-index: 99999;
- right: 60px;
- top: 40px;
display: flex;
align-items: center;
.fullbtn {
@@ -460,10 +939,6 @@
color: #00ffff;
margin-right: 10px;
}
- div {
- font-size: 16px;
- color: #00ffff;
- }
}
.backBtn {
@@ -474,10 +949,6 @@
width: 14px;
height: 14px;
margin-right: 10px;
- }
- div {
- font-size: 16px;
- color: #00ffff;
}
}
}
@@ -504,37 +975,7 @@
align-items: flex-start;
.line-item {
- width: calc((100vw - 180px) / 6);
- padding-left: 20px;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin-right: 20px;
- flex-wrap: nowrap;
- .picbox {
- width: 100%;
- height: calc((100vh - 130px) / 5);
- padding: 10px;
- margin-bottom: 40px;
- box-sizing: border-box;
-
- img {
- display: block;
- width: 100%;
- height: 100px;
- margin-bottom: 10px;
- border-radius: 4px;
- }
- p {
- font-size: 14px;
- color: rgba(255, 255, 255, 0.8);
- margin-top: 10px;
- span {
- color: #fff;
- }
- }
- }
.area-head {
position: relative;
width: 100%;
@@ -675,128 +1116,6 @@
.more-info {
width: 100%;
- .item {
- width: calc((100vw - 120px) / 6);
- height: calc((100vh - 130px) / 5);
- padding: 0 50px 20px;
- position: relative;
- box-sizing: border-box;
- border-left: 1px solid #36fcfc;
-
- &:last-of-type {
- border: none;
- }
-
- section {
- width: 24px;
- height: 24px;
- border-radius: 50%;
- position: absolute;
- border: 1px solid rgba(0, 225, 255, 0.6);
- top: -12px;
- left: 10px;
-
- .dot {
- position: absolute;
- width: 12px;
- height: 12px;
- left: 5px;
- top: 5px;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border: 1px solid #0072ff;
- border-radius: 50%;
- background-color: #00e1ff;
- z-index: 2;
- }
- .pulse {
- position: absolute;
- width: 48px;
- height: 48px;
- left: -13px;
- top: -13px;
- border: 1px solid #00e1ff;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border-radius: 50%;
- z-index: 1;
- opacity: 0;
- -webkit-animation: warn 2s ease-out;
- -moz-animation: warn 2s ease-out;
- animation: warn 2s ease-out;
- -webkit-animation-iteration-count: infinite;
- -moz-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- box-shadow: 1px 1px 30px #00e1ff;
- }
- .pulse1 {
- position: absolute;
- width: 48px;
- height: 48px;
- left: -13px;
- top: -13px;
- border: 1px solid #00e1ff;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border-radius: 50%;
- z-index: 1;
- opacity: 0;
- -webkit-animation: warn1 2s ease-out;
- -moz-animation: warn1 2s ease-out;
- animation: warn1 2s ease-out;
- -webkit-animation-iteration-count: infinite;
- -moz-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- box-shadow: 1px 1px 30px #00e1ff;
- }
- }
- & > div {
- padding: 10px 0;
- transform: translateY(-14px);
- border-radius: 8px;
- background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
- border: 1px solid rgba(54, 252, 252, 1);
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- div {
- margin-bottom: 5px;
- &:last-of-type {
- margin-bottom: none;
- }
- span {
- display: inline-block;
- width: 50%;
- font-size: 13px;
- color: #fff;
- text-align: left;
-
- &:first-of-type {
- text-align: right;
- color: rgba(255, 255, 255, 0.8);
- }
- }
- }
- }
- .noBorder{
- border: 1px solid rgba(54, 252, 252, 0.1);
- }
- .redBorder{
- border: 1px solid #ff0000;
- }
- p {
- width: 140px;
- height: 50px;
- font-size: 18px;
- line-height: 48px;
- text-align: center;
- color: #fff;
- border-radius: 8px;
- background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
- border: 1px solid rgba(54, 252, 252, 0.6);
- }
- }
.warning {
& > section {
border: 1px solid #ff0000;
@@ -848,30 +1167,6 @@
width: 100%;
height: 80px;
border-left: none;
- .finish-point {
- position: absolute;
- width: 90px;
- height: 90px;
- border: 2px solid #0072ff;
- left: -30px;
- top: -45px;
- border-radius: 50%;
-
- & > div {
- width: 80px;
- height: 80px;
- position: absolute;
- left: 3px;
- top: 3px;
- background: #0072ff;
- border-radius: 50%;
- color: #fff;
- font-size: 16px;
- line-height: 80px;
- text-align: center;
- font-weight: bolder;
- }
- }
}
}
.pic-tit {
diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 9ceff18..67f40e0 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -133,7 +133,7 @@
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon9.png" />
<div>
- <div class="itemTit">危险化学品全生命周期安全<br />管理系统</div>
+ <div class="itemTit">危险化学品全生命周期安全管理系统</div>
<div class="enTit">Full life cycle of hazardous chemicals</div>
</div>
</div>
@@ -400,6 +400,312 @@
</script>
<style scoped lang="scss">
+ @media screen and (min-width: 1400px) {
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 20px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 28px;
+ line-height: 34px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ }
+ .enTit{
+ font-size: 18px;
+ line-height: 20px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 88px;
+ height: 88px;
+ margin-right: 20px;
+ }
+ }
+ .bgImg {
+ position: absolute;
+ width: 30%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 34px;
+ line-height: 42px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 22px;
+ line-height: 24px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+
+ .bot-rights{
+ font-size: 18px;
+ color: #333;
+ }
+ }
+
+ @media screen and (min-width: 1200px) and (max-width: 1400px){
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 15px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 26px;
+ line-height: 30px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ margin-bottom: 2px;
+ }
+ .enTit{
+ font-size: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 44px;
+ height: 44px;
+ margin-right: 10px;
+ }
+
+ }
+ .bgImg {
+ position: absolute;
+ width: 30%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 28px;
+ line-height: 36px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 16px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+ .bot-rights{
+ font-size: 15px;
+ color: #333;
+ }
+ }
+ @media screen and (max-width: 1200px){
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 15px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 18px;
+ line-height: 22px;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ }
+ .enTit{
+ font-size: 12px;
+ line-height: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 32px;
+ height: 32px;
+ margin-right: 10px;
+ }
+ }
+ .bgImg {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 24px;
+ line-height: 36px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+ .bot-rights{
+ font-size: 12px;
+ color: #333;
+ }
+ }
.login-container {
width: 100%;
height: 100%;
@@ -579,13 +885,6 @@
top: 260px;
left: 240px;
.gridCont {
- width: 100%;
- height: 100%;
- display: grid;
- grid-gap: 20px;
- grid-template-columns: repeat(3, 1fr);
- grid-auto-flow: row;
- justify-content: center;
.grid-content {
border-radius: 16px;
@@ -594,71 +893,10 @@
cursor: pointer;
transition: 0.3s;
border: none;
- .toplayer{
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- display: flex;
- align-items: center;
- padding: 0 20px;
- z-index: 99;
- }
+
&:hover {
background-image: radial-gradient(ellipse farthest-side at 50% 100%,#48A3FF 0%,#fff 120%);
box-shadow: 8px 8px 24px rgba(20,97,234,.2), -8px -8px 24px #fafafa;
- }
-
- .itemTit {
- font-size: 29px;
- line-height: 36px;
- height: 40%;
- font-family: 'PingFang SC';
- font-weight: 600;
- color: #072270;
- margin-bottom: 2px;
- }
- .enTit{
- font-size: 18px;
- color: #072270;
- font-family: 'PingFang SC';
- font-weight: 600;
- }
- .enTit1{
- font-size: 22px;
- color: #072270;
- font-family: 'PingFang SC';
- font-weight: 600;
- }
- .itemTit1 {
- font-size: 36px;
- line-height: 48px;
- height: 40%;
- font-family: 'PingFang SC';
- font-weight: 600;
- letter-spacing: 1px;
- color: #072270;
- margin-bottom: 18px;
- }
- .iconImg {
- width: 88px;
- height: 88px;
- margin-right: 20px;
- }
- .bgImg1 {
- position: absolute;
- width: 45%;
- height: auto;
- right: -20px;
- top: 30%;
- }
- .bgImg {
- position: absolute;
- width: 30%;
- height: auto;
- right: -10px;
- top: 15px;
}
}
.cont-bg-1{
@@ -667,26 +905,7 @@
.cont-bg-2{
background: #CDD6FF;
}
- .grid-content-1{
- grid-row-start: 1;
- grid-row-end: 3;
- .toplayer{
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- display: flex;
- align-items: center;
- z-index: 99;
-
- &>div{
- display: flex;
- align-items: flex-start;
- }
- }
- }
/*.grid-content-2{*/
/* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
@@ -713,8 +932,6 @@
height: 8px;
}
div{
- font-size: 18px;
- color: #333;
margin: 0 20px;
}
}
diff --git a/src/views/specialWorkSystem/workApplyManage/workTicket/index.vue b/src/views/specialWorkSystem/workApplyManage/workTicket/index.vue
index 466fa00..f73f27d 100644
--- a/src/views/specialWorkSystem/workApplyManage/workTicket/index.vue
+++ b/src/views/specialWorkSystem/workApplyManage/workTicket/index.vue
@@ -219,9 +219,7 @@
</div>
</el-form>
<div class="applyBtn">
- <el-col :span="24" class="submitBtn">
- <el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button>
- </el-col>
+ <el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button>
</div>
<el-dialog v-model="dialogAddWorker" title="添加作业人">
<el-form :model="addWorkerForm" label-width="120px" :rules="addWorkerRules" ref='ruleFormRef3'>
@@ -624,26 +622,20 @@
.homeCard{
width: 100%;
padding: 20px;
+ box-sizing: border-box;
background: #fff;
border-radius: 4px;
margin-bottom: 20px;
-
- &:last-of-type{
- margin-bottom: 100px;
- }
}
.applyBtn{
- position: absolute;
width: 100%;
- padding: 20px;
background: #fff;
- bottom: 0;
- left: 0;
height: 80px;
- z-index: 999;
- margin-bottom: 0;
- border-radius: 0;
+ z-index: 5;
box-shadow: 0 -3px 8px rgba(150,150,150,.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.el-row{
margin-bottom: 20px;
@@ -662,10 +654,6 @@
}
.el-cascader{
width: 100% !important;
- }
- .submitBtn{
- display: flex;
- justify-content: center;
}
}
</style>
--
Gitblit v1.9.2