|
@@ -1,9 +1,209 @@
|
|
|
<script setup>
|
|
|
-import TheWelcome from '../components/TheWelcome.vue'
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+
|
|
|
+import icon01 from '@/assets/images/home/icon1.png';
|
|
|
+import icon02 from '@/assets/images/home/icon2.png';
|
|
|
+import icon03 from '@/assets/images/home/icon3.png';
|
|
|
+import icon04 from '@/assets/images/home/icon4.png';
|
|
|
+import icon05 from '@/assets/images/home/icon5.png';
|
|
|
+import icon06 from '@/assets/images/home/icon6.png';
|
|
|
+import icon07 from '@/assets/images/home/icon7.png';
|
|
|
+
|
|
|
+const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
+const releaseDate = ref(null);
|
|
|
+const releaseTime = ref(null);
|
|
|
+const dayOfWeek = ref(null);
|
|
|
+
|
|
|
+const categoryList = [
|
|
|
+ {img: icon01, title: 'LibraAl智能体运营平台', subTitle: '(正式)', src: 'http://chat.sequoialibra.com:81'},
|
|
|
+ {img: icon02, title: 'LibraAl智能体运营平台', subTitle: '(正式后台)', src: 'http://chat.sequoialibra.com:81/admin/'},
|
|
|
+ {img: icon03, title: 'LibraAl智能体运营平台', subTitle: '(测试)', src: 'http://192.168.40.21'},
|
|
|
+ {img: icon04, title: 'LibraAl智能体运营平台', subTitle: '(测试后台)', src: 'http://192.168.40.21/admin/'},
|
|
|
+ {img: icon05, title: '智能国标化验室', subTitle: '管理平台', src: 'http://192.168.40.20/'},
|
|
|
+ {img: icon06, title: '数据资产', subTitle: '管理系统', src: 'http://192.168.40.21/sjzc/'},
|
|
|
+ {img: icon07, title: '锡林浩特开发区污水处理', subTitle: '二厂系统', src: 'http://10.1.100.119:8899/'}
|
|
|
+];
|
|
|
+const handleClickLink = ({ src }) => {
|
|
|
+ window.open(src);
|
|
|
+}
|
|
|
+const getReleaseDate = () => {
|
|
|
+ dayOfWeek.value = weekDays[dayjs().day()];
|
|
|
+ releaseDate.value = dayjs().format('YYYY-MM-DD');
|
|
|
+ releaseTime.value = dayjs().format('HH:mm:ss');
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getReleaseDate();
|
|
|
+ setInterval(() => getReleaseDate(), 1000);
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <main>
|
|
|
- <TheWelcome />
|
|
|
- </main>
|
|
|
+ <div class="app-container">
|
|
|
+ <header class="header">
|
|
|
+ <div class="header-left">
|
|
|
+ <img src="@/assets/images/home/logo.png" alt="" class="logo"></img>
|
|
|
+ </div>
|
|
|
+ <div class="header-right space-x-[16px]">
|
|
|
+ <div class="time space-x-[10px]">
|
|
|
+ <span>{{ releaseDate }}</span>
|
|
|
+ <span>{{ releaseTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="week">{{ dayOfWeek }}</div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <main class="main">
|
|
|
+ <ul class="title space-y-[8px]">
|
|
|
+ <li><img src="@/assets/images/svg/logo-text.svg" alt="" /></li>
|
|
|
+ <li><span>LibraAI平台管理入口</span></li>
|
|
|
+ </ul>
|
|
|
+ <div class="category-warp">
|
|
|
+ <div class="category-item space-y-[8px]" v-for="(item, index) in categoryList" :key="index" @click="handleClickLink(item)">
|
|
|
+ <img :src="item.img" alt="" class="block w-[80px] h-[80px]">
|
|
|
+ <div>
|
|
|
+ <p>{{ item.title }}</p>
|
|
|
+ <p>{{ item.subTitle }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: url("@/assets/images/home/bg-page.png") center center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 22px 40px;
|
|
|
+
|
|
|
+ .header-left {
|
|
|
+ width: 91px;
|
|
|
+ height: 36px;
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .time {
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1D2129;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .week {
|
|
|
+ width: 54px;
|
|
|
+ height: 22px;
|
|
|
+ padding: 1px 9px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(188, 204, 229, 0.80);
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #2F4C6E;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-flow: column;
|
|
|
+ padding-top: 56px;
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ align-items: center;
|
|
|
+ color: #637F9C;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .category-warp {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 230px 230px 110px 110px 110px 110px 110px 110px;
|
|
|
+ grid-template-rows: 200px 200px;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 20px;
|
|
|
+ padding: 36px 120px 126px 120px;
|
|
|
+ background-clip:content-box;
|
|
|
+
|
|
|
+ .category-item {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #FFF;
|
|
|
+ backdrop-filter: blur(2px);
|
|
|
+ box-shadow: 0px 4px 16px 0px rgba(43, 83, 121, 0.16);
|
|
|
+ color: #1D2129;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-style: normal;
|
|
|
+ line-height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all .2s ease-in-out;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #008afa;
|
|
|
+ transform: translateY(-10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(1), &:nth-child(2) {
|
|
|
+ grid-row-start: 1;
|
|
|
+ grid-row-end: 3;
|
|
|
+ background: linear-gradient(180deg, rgba(198, 240, 255, 0.40) 0%, rgba(230, 253, 255, 0.40) 9%, rgba(252, 253, 254, 0.80) 21%, rgba(255, 255, 255, 0.80) 100%);
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ grid-column-start: 3;
|
|
|
+ grid-column-end: 6;
|
|
|
+ background: linear-gradient(180deg, rgba(233, 242, 251, 0.80) 0%, rgba(243, 248, 253, 0.80) 9%, rgba(252, 253, 254, 0.80) 21%, rgba(255, 255, 255, 0.80) 100%);
|
|
|
+ box-shadow: 0px 4px 8px 0px rgba(43, 83, 121, 0.18);
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ grid-column-start: 6;
|
|
|
+ grid-column-end: 9;
|
|
|
+ background: linear-gradient(180deg, rgba(233, 242, 251, 0.80) 0%, rgba(243, 248, 253, 0.80) 9%, rgba(252, 253, 254, 0.80) 21%, rgba(255, 255, 255, 0.80) 100%);
|
|
|
+ box-shadow: 0px 4px 8px 0px rgba(43, 83, 121, 0.18);
|
|
|
+ }
|
|
|
+ &:nth-child(5) {
|
|
|
+ grid-column-start: 3;
|
|
|
+ grid-column-end: 5;
|
|
|
+ background: linear-gradient(180deg, rgba(233, 242, 251, 0.80) 0%, rgba(243, 248, 253, 0.80) 9%, rgba(252, 253, 254, 0.80) 21%, rgba(255, 255, 255, 0.80) 100%);
|
|
|
+ box-shadow: 0px 4px 8px 0px rgba(43, 83, 121, 0.18);
|
|
|
+ }
|
|
|
+ &:nth-child(6) {
|
|
|
+ grid-column-start: 5;
|
|
|
+ grid-column-end: 7;
|
|
|
+ background: linear-gradient(180deg, rgba(233, 242, 251, 0.80) 0%, rgba(243, 248, 253, 0.80) 9%, rgba(252, 253, 254, 0.80) 21%, rgba(255, 255, 255, 0.80) 100%);
|
|
|
+ }
|
|
|
+ &:nth-child(7) {
|
|
|
+ grid-column-start: 7;
|
|
|
+ grid-column-end: 9;
|
|
|
+ background: linear-gradient(180deg, rgba(233, 242, 251, 0.80) 0%, rgba(243, 248, 253, 0.80) 9%, rgba(252, 253, 254, 0.80) 21%, rgba(255, 255, 255, 0.80) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|