diff --git a/public/bigScreen/drop_down_icon.png b/public/bigScreen/drop_down_icon.png new file mode 100644 index 0000000..2d8ae8a Binary files /dev/null and b/public/bigScreen/drop_down_icon.png differ diff --git a/public/bigScreen/drop_down_item_background.png b/public/bigScreen/drop_down_item_background.png new file mode 100644 index 0000000..ec07a9c Binary files /dev/null and b/public/bigScreen/drop_down_item_background.png differ diff --git a/public/bigScreen/fonts/AlimamaShuHeiTi.ttf b/public/bigScreen/fonts/AlimamaShuHeiTi.ttf new file mode 100644 index 0000000..854c844 Binary files /dev/null and b/public/bigScreen/fonts/AlimamaShuHeiTi.ttf differ diff --git a/public/bigScreen/fonts/DIN-Regular.otf b/public/bigScreen/fonts/DIN-Regular.otf new file mode 100644 index 0000000..2ea9379 Binary files /dev/null and b/public/bigScreen/fonts/DIN-Regular.otf differ diff --git a/public/bigScreen/fonts/DINPro-Medium.ttf b/public/bigScreen/fonts/DINPro-Medium.ttf new file mode 100644 index 0000000..0b0289f Binary files /dev/null and b/public/bigScreen/fonts/DINPro-Medium.ttf differ diff --git a/public/bigScreen/footer_background.png b/public/bigScreen/footer_background.png new file mode 100644 index 0000000..f06e3da Binary files /dev/null and b/public/bigScreen/footer_background.png differ diff --git a/public/bigScreen/forewarning_background.png b/public/bigScreen/forewarning_background.png new file mode 100644 index 0000000..32f632b Binary files /dev/null and b/public/bigScreen/forewarning_background.png differ diff --git a/public/bigScreen/forewarning_error_background.png b/public/bigScreen/forewarning_error_background.png new file mode 100644 index 0000000..813fe40 Binary files /dev/null and b/public/bigScreen/forewarning_error_background.png differ diff --git a/public/bigScreen/header_background.png b/public/bigScreen/header_background.png new file mode 100644 index 0000000..1965e17 Binary files /dev/null and b/public/bigScreen/header_background.png differ diff --git a/public/bigScreen/left_border.png b/public/bigScreen/left_border.png new file mode 100644 index 0000000..0db7ec7 Binary files /dev/null and b/public/bigScreen/left_border.png differ diff --git a/public/bigScreen/monitor_button.png b/public/bigScreen/monitor_button.png new file mode 100644 index 0000000..710672c Binary files /dev/null and b/public/bigScreen/monitor_button.png differ diff --git a/public/bigScreen/monitor_button_select.png b/public/bigScreen/monitor_button_select.png new file mode 100644 index 0000000..786ef15 Binary files /dev/null and b/public/bigScreen/monitor_button_select.png differ diff --git a/public/bigScreen/monitor_sub_button.png b/public/bigScreen/monitor_sub_button.png new file mode 100644 index 0000000..ef8f468 Binary files /dev/null and b/public/bigScreen/monitor_sub_button.png differ diff --git a/public/bigScreen/monitor_sub_button_select.png b/public/bigScreen/monitor_sub_button_select.png new file mode 100644 index 0000000..e17530e Binary files /dev/null and b/public/bigScreen/monitor_sub_button_select.png differ diff --git a/public/bigScreen/ornament.png b/public/bigScreen/ornament.png new file mode 100644 index 0000000..aab6040 Binary files /dev/null and b/public/bigScreen/ornament.png differ diff --git a/public/bigScreen/person_item.png b/public/bigScreen/person_item.png new file mode 100644 index 0000000..d5d004f Binary files /dev/null and b/public/bigScreen/person_item.png differ diff --git a/public/bigScreen/person_subtitle.png b/public/bigScreen/person_subtitle.png new file mode 100644 index 0000000..efd3d10 Binary files /dev/null and b/public/bigScreen/person_subtitle.png differ diff --git a/public/bigScreen/response_resource_item.png b/public/bigScreen/response_resource_item.png new file mode 100644 index 0000000..4262608 Binary files /dev/null and b/public/bigScreen/response_resource_item.png differ diff --git a/public/bigScreen/right_backgorund.png b/public/bigScreen/right_backgorund.png new file mode 100644 index 0000000..9c2a4d9 Binary files /dev/null and b/public/bigScreen/right_backgorund.png differ diff --git a/public/bigScreen/right_border.png b/public/bigScreen/right_border.png new file mode 100644 index 0000000..3dc632c Binary files /dev/null and b/public/bigScreen/right_border.png differ diff --git a/public/bigScreen/small_background.png b/public/bigScreen/small_background.png new file mode 100644 index 0000000..14ce9f2 Binary files /dev/null and b/public/bigScreen/small_background.png differ diff --git a/public/bigScreen/subtitle_background.png b/public/bigScreen/subtitle_background.png new file mode 100644 index 0000000..97ec796 Binary files /dev/null and b/public/bigScreen/subtitle_background.png differ diff --git a/public/index.css b/public/index.css index 8cdbc6e..97626e9 100644 --- a/public/index.css +++ b/public/index.css @@ -7,7 +7,24 @@ url(d5d5d31597ee7f8757d9.ttf?t=1675057380323) format('truetype'), url(f9bdc8899495d6698ecd.svg?t=1675057380323#iconfont) format('svg'); } - +@font-face { + font-family: 'AlimamaShuHeiTi'; + src: url('/bigScreen/fonts/AlimamaShuHeiTi.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'DINPro'; + src: url('/bigScreen/fonts/fonts/DINPro-Medium.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'DINProRegular'; + src: url('/bigScreen/fonts/DIN-Regular.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} .iconfont { font-family: "iconfont" !important; font-size: 16px; @@ -152,155 +169,155 @@ content: "\e60c"; } - -.icon { - font-size: 35px !important; - color: #f18d00; - position: absolute; - bottom: 10px; -} -.record-icon { - font-size: 35px !important; - color: #f18d00; - position: absolute; - bottom: 60px; -} -.topRight { - top: 20px; - bottom: unset; -} -.topLeft { - top: 16px; - left: 16px; - position: absolute; - font-size: 20px; -} -.position_left_0 { - left: 10px; -} -.position_left_1 { - left: 65px; -} -.position_left_2 { - left: 120px; -} -.position_left_3 { - left: 175px; -} -.position_left_4 { - left: 230px; -} -.position_left_5 { - left: 285px; -} -.position_left_6 { - left: 340px; -} -.position_left_7 { - left: 395px; -} -.position_left_8 { - left: 450px; -} -.position_right_0 { - right: 10px; -} -.position_right_1 { - right: 65px; -} -.position_right_2 { - right: 120px; -} -.position_right_3 { - right: 175px; -} -.position_right_4 { - right: 230px; -} -.position_right_5 { - right: 285px; -} -.position_right_6 { - right: 340px; -} -.position_right_7 { - right: 395px; -} -.position_right_8 { - right: 450px; -} -.player__PTZArea { - height: 120px; - width: 120px; - position: absolute; - top: 50%; - right: 10px; - transform: translateY(-50%); - border-radius: 50%; - background-color: rgba(255, 255, 255, 0.3); - box-shadow: 0 0 5px rgba(255, 255, 255, 0); - z-index: 9999; -} -.player__PTZArea::after { - content: ''; - width: 20px; - height: 20px; - top: 50%; - right: 50%; - background: #2b8bf7; - position: absolute; - transform: translate(50%, -50%); - border-radius: 50%; -} -.arrow-up { - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #ffffff; - top: 20px; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 0; - position: absolute; - pointer-events: none; -} -.arrow-down { - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 6px solid #ffffff; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 0; - position: absolute; - pointer-events: none; -} -.arrow-left { - border-right: 6px solid #ffffff; - border-bottom: 6px solid transparent; - border-top: 6px solid transparent; - left: 20px; - top: 50%; - transform: translateY(-50%); - width: 0; - height: 0; - position: absolute; - pointer-events: none; -} -.arrow-right { - border-left: 6px solid #ffffff; - border-bottom: 6px solid transparent; - border-top: 6px solid transparent; - right: 20px; - top: 50%; - transform: translateY(-50%); - width: 0; - height: 0; - position: absolute; - pointer-events: none; -} - + +.icon { + font-size: 35px !important; + color: #f18d00; + position: absolute; + bottom: 10px; +} +.record-icon { + font-size: 35px !important; + color: #f18d00; + position: absolute; + bottom: 60px; +} +.topRight { + top: 20px; + bottom: unset; +} +.topLeft { + top: 16px; + left: 16px; + position: absolute; + font-size: 20px; +} +.position_left_0 { + left: 10px; +} +.position_left_1 { + left: 65px; +} +.position_left_2 { + left: 120px; +} +.position_left_3 { + left: 175px; +} +.position_left_4 { + left: 230px; +} +.position_left_5 { + left: 285px; +} +.position_left_6 { + left: 340px; +} +.position_left_7 { + left: 395px; +} +.position_left_8 { + left: 450px; +} +.position_right_0 { + right: 10px; +} +.position_right_1 { + right: 65px; +} +.position_right_2 { + right: 120px; +} +.position_right_3 { + right: 175px; +} +.position_right_4 { + right: 230px; +} +.position_right_5 { + right: 285px; +} +.position_right_6 { + right: 340px; +} +.position_right_7 { + right: 395px; +} +.position_right_8 { + right: 450px; +} +.player__PTZArea { + height: 120px; + width: 120px; + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.3); + box-shadow: 0 0 5px rgba(255, 255, 255, 0); + z-index: 9999; +} +.player__PTZArea::after { + content: ''; + width: 20px; + height: 20px; + top: 50%; + right: 50%; + background: #2b8bf7; + position: absolute; + transform: translate(50%, -50%); + border-radius: 50%; +} +.arrow-up { + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + top: 20px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + position: absolute; + pointer-events: none; +} +.arrow-down { + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid #ffffff; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + position: absolute; + pointer-events: none; +} +.arrow-left { + border-right: 6px solid #ffffff; + border-bottom: 6px solid transparent; + border-top: 6px solid transparent; + left: 20px; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + position: absolute; + pointer-events: none; +} +.arrow-right { + border-left: 6px solid #ffffff; + border-bottom: 6px solid transparent; + border-top: 6px solid transparent; + right: 20px; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + position: absolute; + pointer-events: none; +} + /** 图标字体 **/ @font-face {font-family: 'laydate-icon'; src: url(8b41e97a50a295189017.eot); @@ -470,4 +487,4 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;} .laydate-theme-grid .laydate-year-list>li{height: 43px; line-height: 43px;} .laydate-theme-grid .laydate-month-list>li{height: 71px; line-height: 71px;} - + diff --git a/src/router/index.js b/src/router/index.js index 8cc8648..7721ddb 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -24,6 +24,7 @@ import Layout from '../views/layout/Layout' export const constantRouterMap = [ { path: '/login', component: () => import('@/views/login/index'), meta: { sortNo: 0 }, hidden: true }, { path: '/home', component: () => import('@/views/home/index'), meta: { sortNo: 0 }, hidden: true }, + { path: '/bigscreen', component: () => import('@/views/bigScreen/index'), meta: { sortNo: 0 }, hidden: true }, { path: '/404', component: () => import('@/views/errorPage/404'), meta: { sortNo: 0 }, hidden: true }, { path: '/401', component: () => import('@/views/errorPage/401'), meta: { sortNo: 0 }, hidden: true }, // // 把二级路由提前加到路由表，实现路由缓存 diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue new file mode 100644 index 0000000..487b7fd --- /dev/null +++ b/src/views/bigScreen/index.vue @@ -0,0 +1,656 @@ + + + + +