Skip to content

Y
yaoai-video
Commit 07a22029 authored by 黄同智's avatar 黄同智
Browse files
Options

优化侧边栏，和顶部导航栏

parent f7b805c2
Show whitespace changes
Inline Side-by-side
Showing with 123 additions and 35 deletions
doc/h5/src/components/Aside.vue
View file @ 07a22029
......@@ -4,9 +4,17 @@
<img src="@/static/imgs/logo.png" class="w-100 h-22" alt="Logo">
</div>
<div class="mt-22 h-36 flex-center relative selectbox">
<el-icon class="absolute top-1 left-16" size="20" style="z-index: 1;">
<Help />
</el-icon>
<div class="absolute top-10 left-16" style="z-index: 1;">
<svg t="1779787867535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="73193" width="16" height="16">
<path
d="M426.3 611.6c-141.5 0-256.5-115.1-256.5-256.5s115-256.6 256.5-256.6S682.8 213.6 682.8 355 567.7 611.6 426.3 611.6z m0-416.4c-88.1 0-159.8 71.7-159.8 159.8s71.7 159.8 159.8 159.8c88.1 0 159.8-71.7 159.8-159.8s-71.7-159.8-159.8-159.8z"
fill="#5337C7" p-id="73194"></path>
<path
d="M738.5 923.8c-26.7 0-48.4-21.7-48.4-48.4 0-145.5-118.4-263.9-263.9-263.9S162.4 730 162.4 875.5c0 26.7-21.7 48.4-48.4 48.4s-48.4-21.7-48.4-48.4c0-198.8 161.8-360.6 360.6-360.6s360.6 161.8 360.6 360.6c0.1 26.7-21.6 48.3-48.3 48.3zM912 854.4c-26.7 0-48.4-21.7-48.4-48.4 0-101.5-56.9-192.3-148.6-237-15.4-7.5-25.7-22.6-27-39.7-1.3-17.1 6.4-33.6 20.5-43.4 42.8-30 68.4-78.9 68.4-130.9 0-72.1-48.5-135.5-118-154.3-25.8-7-41-33.5-34.1-59.3 6.9-25.8 33.4-41.1 59.3-34.1 111.6 30.1 189.5 132 189.5 247.7 0 59.8-21 117-58.1 162.3 90.7 67.3 144.8 172.9 144.8 288.7 0.1 26.8-21.6 48.4-48.3 48.4z"
fill="#5337C7" p-id="73195"></path>
</svg>
</div>
<el-select v-model="groupValue">
<el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
......@@ -15,9 +23,12 @@
<div class="ml-16 mt-16 mb-4" style="color: #00000066;">创作</div>
<div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
:class="indexvalue == 0 ? 'active' : ''" @click="switchTab(0)">
<el-icon>
<VideoCameraFilled />
</el-icon>
<svg t="1779787201077" class="icon" viewBox="0 0 1251 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="51112" width="16" height="18">
<path
d="M1063.442963 0H188.112593C84.347259 0 0 83.171556 0 185.457778v653.084444C0 940.828444 84.347259 1024 188.112593 1024h875.33037c103.765333 0 188.112593-83.171556 188.112593-185.457778V185.457778C1251.403852 83.285333 1167.056593 0 1063.442963 0zM75.282963 549.015704h91.894518v131.602963H75.282963v-131.602963z m91.780741-74.183111H75.093333V343.22963h91.894519v131.602963zM242.270815 74.221037h766.78637v875.557926H242.308741V74.221037zM1176.272593 474.832593h-91.894519V343.22963h91.894519v131.602963z m-91.894519 74.183111h91.894519v131.602963h-91.894519v-131.602963z m91.894519-363.557926v83.702518h-91.894519V76.231111c52.224 9.633185 91.894519 54.916741 91.894519 109.188741zM167.063704 76.231111v192.891259H75.093333V185.457778c0.151704-54.234074 39.670519-99.555556 91.894519-109.188741z m-91.780741 762.311111v-83.740444h91.894518v193.042963c-52.337778-9.784889-91.894519-55.068444-91.894518-109.340445z m1009.095111 109.150815v-192.891259h91.894519v83.702518c0 54.234074-39.670519 99.555556-91.894519 109.188741z m-277.504-510.482963A84.992 84.992 0 0 1 850.678519 512c0 31.250963-16.497778 59.164444-43.842371 74.752l-274.583704 156.406519a88.329481 88.329481 0 0 1-87.722666 0 84.992 84.992 0 0 1-43.880297-74.752V355.593481c0-31.250963 16.497778-59.164444 43.880297-74.714074a87.988148 87.988148 0 0 1 87.570963 0l274.735407 156.368593z m-37.584593 85.333333a12.250074 12.250074 0 0 0 6.295704-10.581333c0-2.616889-0.83437-7.585185-6.144-10.619259L494.554074 345.012148a12.515556 12.515556 0 0 0-12.439704 0 12.136296 12.136296 0 0 0-6.144 10.619259v312.775112c0 6.181926 3.792593 9.216 6.144 10.619259 2.389333 1.327407 7.130074 3.034074 12.439704 0l274.735407-156.406519z"
:fill="indexvalue == 0 ? '#5337C7' : '#3f3f51'" p-id="51113"></path>
</svg>
<span>剧本生成短剧</span>
</div>
</div>
......@@ -25,14 +36,20 @@
<div class="ml-16 mt-16 mb-4" style="color: #00000066;">我的</div>
<div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
:class="indexvalue == 1 ? 'active' : ''" @click="switchTab(1)">
<el-icon>
<Files />
</el-icon>
<svg t="1779787587591" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="64906" width="16" height="16">
<path
d="M450.66344 529.684L50.09544 339.18C22.20544 328.377 3.82144 301.543 3.82144 271.633c0-29.91 18.383-56.744 46.274-67.546L450.66344 13.582a144.87 144.87 0 0 1 122.054 0L973.28544 204.087c27.89 10.802 46.274 37.636 46.274 67.546 0 29.91-18.383 56.744-46.274 67.546L572.71744 529.684a144.87 144.87 0 0 1-122.054 0z"
:fill="indexvalue == 1 ? '#5337C7' : '#3f3f51'" p-id="64907"></path>
<path
d="M511.69044 784.476a189.964 189.964 0 0 1-84.025-19.557L34.70244 569.705a54.327 54.327 0 1 1 48.17-96.882l392.6 195.213a82.939 82.939 0 0 0 72.436 0l392.962-195.213a54.327 54.327 0 1 1 48.17 96.882L595.71544 764.919a189.42 189.42 0 0 1-84.025 19.557z m0 229.62a189.42 189.42 0 0 1-84.025-19.557L34.70244 799.325a54.327 54.327 0 1 1 48.17-96.882l392.6 195.214a81.671 81.671 0 0 0 72.436 0l392.962-195.214a54.327 54.327 0 1 1 48.17 96.882L595.71544 994.54a189.42 189.42 0 0 1-84.025 19.558z"
:fill="indexvalue == 1 ? '#5337C7' : '#3f3f51'" p-id="64908"></path>
</svg>
<span>项目</span>
</div>
<div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
:class="indexvalue == 2 ? 'active' : ''" @click="switchTab(2)">
<el-icon>
<el-icon size="16">
<PieChart />
</el-icon>
<span>资产</span>
......@@ -42,23 +59,43 @@
<div class="ml-16 mt-16 mb-4" style="color: #00000066;">企业配置</div>
<div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
:class="indexvalue == 3 ? 'active' : ''" @click="switchTab(3)">
<el-icon>
<Files />
</el-icon>
<svg t="1779787867535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="73193" width="16" height="16">
<path
d="M426.3 611.6c-141.5 0-256.5-115.1-256.5-256.5s115-256.6 256.5-256.6S682.8 213.6 682.8 355 567.7 611.6 426.3 611.6z m0-416.4c-88.1 0-159.8 71.7-159.8 159.8s71.7 159.8 159.8 159.8c88.1 0 159.8-71.7 159.8-159.8s-71.7-159.8-159.8-159.8z"
:fill="indexvalue == 3 ? '#5337C7' : '#3f3f51'" p-id="73194"></path>
<path
d="M738.5 923.8c-26.7 0-48.4-21.7-48.4-48.4 0-145.5-118.4-263.9-263.9-263.9S162.4 730 162.4 875.5c0 26.7-21.7 48.4-48.4 48.4s-48.4-21.7-48.4-48.4c0-198.8 161.8-360.6 360.6-360.6s360.6 161.8 360.6 360.6c0.1 26.7-21.6 48.3-48.3 48.3zM912 854.4c-26.7 0-48.4-21.7-48.4-48.4 0-101.5-56.9-192.3-148.6-237-15.4-7.5-25.7-22.6-27-39.7-1.3-17.1 6.4-33.6 20.5-43.4 42.8-30 68.4-78.9 68.4-130.9 0-72.1-48.5-135.5-118-154.3-25.8-7-41-33.5-34.1-59.3 6.9-25.8 33.4-41.1 59.3-34.1 111.6 30.1 189.5 132 189.5 247.7 0 59.8-21 117-58.1 162.3 90.7 67.3 144.8 172.9 144.8 288.7 0.1 26.8-21.6 48.4-48.3 48.4z"
:fill="indexvalue == 3 ? '#5337C7' : '#3f3f51'" p-id="73195"></path>
</svg>
<span>团队管理</span>
</div>
<div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
:class="indexvalue == 4 ? 'active' : ''" @click="switchTab(4)">
<el-icon>
<PieChart />
</el-icon>
<svg t="1779788041086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="82395" width="16" height="16">
<path
d="M819.182933 955.716267a34.1504 34.1504 0 0 1 0 68.283733H204.8a34.1504 34.1504 0 0 1 0-68.283733H819.2z m34.133334-955.716267C947.5072 0 1024 71.406933 1024 159.232v568.951467c-0.136533 87.842133-76.629333 159.232-170.683733 159.232H170.666667C76.6464 887.432533 0 816.042667 0 728.200533V159.249067C0 71.406933 76.629333 0 170.683733 0H853.333333z m0 68.283733H170.666667c-56.507733 0-102.4 40.789333-102.4 90.965334v568.9344c0 50.158933 45.892267 90.965333 102.4 90.965333h682.615466c56.5248 0 102.417067-40.8064 102.417067-90.965333V159.249067C955.733333 109.090133 909.824 68.266667 853.333333 68.266667zM365.704533 324.266667c59.2384 0 95.453867 27.716267 168.311467 108.202666l13.704533 15.172267c54.903467 60.2624 81.237333 80.008533 110.5408 80.008533 49.4592 0 87.381333-19.165867 117.0432-59.170133a36.3008 36.3008 0 0 1 51.2-7.389867 37.256533 37.256533 0 0 1 7.304534 51.7632c-43.485867 58.606933-103.082667 88.746667-175.547734 88.746667-59.2384 0-95.453867-27.716267-168.311466-108.202667l-13.704534-15.172266c-54.903467-60.2624-81.237333-80.008533-110.5408-80.008534-57.1392 0-92.091733 26.555733-111.581866 85.640534a36.488533 36.488533 0 0 1-46.267734 23.415466 37.085867 37.085867 0 0 1-23.1424-46.779733C213.981867 371.677867 276.514133 324.266667 365.7216 324.266667z"
:fill="indexvalue == 4 ? '#5337C7' : '#3f3f51'" p-id="82396"></path>
</svg>
<span>用量统计</span>
</div>
<div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
:class="indexvalue == 5 ? 'active' : ''" @click="switchTab(5)">
<el-icon>
<PieChart />
</el-icon>
<svg t="1779788163351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="87157" width="16" height="16">
<path
d="M788.667 64C883.29 64 960 140.709 960 235.333V350.71c0 18.225-14.775 33-33 33s-33-14.775-33-33V235.333C894 177.16 846.84 130 788.667 130H235.333C177.16 130 130 177.16 130 235.333v553.334C130 846.84 177.16 894 235.333 894h112.899c18.225 0 33 14.775 33 33s-14.775 33-33 33H235.333C140.71 960 64 883.291 64 788.667V235.333C64 140.71 140.709 64 235.333 64h553.334z"
:fill="indexvalue == 5 ? '#5337C7' : '#3f3f51'" p-id="87158"></path>
<path d="M284.192 314.593a60.731 60.741 0 1 0 121.462 0 60.731 60.741 0 1 0-121.462 0Z" fill="#333333"
p-id="87159"></path>
<path
d="M267.003 633.481c-16.773 0-30.37-13.597-30.37-30.37a30.37 30.37 0 0 1 5.586-17.553l70.329-99.303c9.694-13.688 28.649-16.926 42.337-7.232a30.37 30.37 0 0 1 7.231 7.232l15.33 21.646 145.556-168.563c16.443-19.043 45.21-21.15 64.253-4.707a45.556 45.556 0 0 1 4.706 4.707l188.946 218.815c16.443 19.042 14.336 47.81-4.707 64.253a45.556 45.556 0 0 1-29.773 11.075H267.003z"
:fill="indexvalue == 5 ? '#5337C7' : '#3f3f51'" p-id="87160"></path>
<path
d="M650.86 796.503c50.465-43.752 102.888-62.685 155.854-54.267 51.616 8.203 100.093 41.842 146.01 98.982 11.416 14.207 9.154 34.978-5.053 46.395-14.207 11.416-34.978 9.154-46.395-5.053-36.53-45.46-71.697-69.862-104.922-75.143-31.238-4.964-64.146 6.596-100.057 37.064l-0.989 0.843-1.194 1.25c-39.681 41.242-84.038 60.168-131.215 53.767l-1.46-0.206c-46.18-6.769-91.17-37.31-136.056-89.79-11.846-13.851-10.222-34.682 3.628-46.528 13.85-11.847 34.682-10.222 46.528 3.628 35.46 41.459 67.647 63.31 95.471 67.388 25.31 3.71 50.426-7.175 77.382-35.955a33 33 0 0 1 2.468-2.375z"
:fill="indexvalue == 5 ? '#5337C7' : '#3f3f51'" p-id="87161"></path>
</svg>
<span>AI生成水印设置</span>
</div>
</div>
......@@ -95,16 +132,12 @@ watch(
);
const groupList = [{
value: 'group1',
label: '哈哈哈大萨达',
},
{
value: 'group2',
label: '地址都干啥',
},
value: 0,
label: '默认团队',
}
];
const groupValue = ref(groupList[0].value);
const tabRouter:any = {
const tabRouter: any = {
0: '/',
1: '/projectlist',
2: '/asset',
......
doc/h5/src/components/Header.vue
View file @ 07a22029
......@@ -7,17 +7,26 @@
<img src="@/static/imgs/logo.png" class="w-130 h-26 mb-2 cursor-pointer" alt="Logo" @click="router.push('/')">
</div>
<div class="flex gap-26">
<el-input
v-model="search"
class="responsive-input"
placeholder="搜索产品和文档"
:prefix-icon="Search"
/>
<el-input v-model="searchVal" class="responsive-input" placeholder="搜索产品和文档" :prefix-icon="Search" />
<el-popover placement="bottom" :width="180" trigger="click" :show-arrow="false">
<template #reference>
<el-button type="primary" class="nav-button">
<span class="pt-2">企业</span><el-icon class="el-icon--right" size="12">
<ArrowDownBold />
</el-icon>
</el-button>
</template>
<div class="">
<div v-for="(item, index) in poverMenus" :key="index" class=" py-6 cursor-pointer mt-4 menuhover" @click="router.push(item.path)">{{ item.name }}</div>
</div>
</el-popover>
<!-- <el-button type="primary" class="nav-button">
<span class="pt-2">企业</span><el-icon class="el-icon--right" size="12">
<ArrowDownBold />
</el-icon>
</el-button> -->
<el-button type="primary" class="nav-button">
<span class="pt-2">工具</span><el-icon class="el-icon--right" size="12">
<ArrowDownBold />
......@@ -36,7 +45,9 @@
<el-button type="primary" class="nav-button pt-2">备案</el-button>
<el-button type="primary" class="nav-button pt-2">文档</el-button>
<el-badge :value="12" class="mt-6 cursor-pointer">
<el-icon size="18"><Bell /></el-icon>
<el-icon size="18">
<Bell />
</el-icon>
</el-badge>
<el-button type="primary" link class="nav-button fw-bold color">中文</el-button>
<div class="w-30 h-30 flex-center rounded-circle headimg fs-12 mt-2">黄</div>
......@@ -51,7 +62,34 @@ import { ArrowDownBold, Bell, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const search = ref('');
const searchVal = ref('');
const poverMenus = ref([
{
name: '企业组织',
path: '',
value: 1
},
{
name: '云身份中心',
path: '',
value: 2
},
{
name: '访问控制',
path: '',
value: 3
},
{
name: '资源管理',
path: '',
value: 4
},
{
name: '操作审计（云审计）',
path: '',
value: 5
}
])
</script>
<style scoped lang="scss">
......@@ -59,17 +97,20 @@ const search = ref('');
box-shadow: 0 3px 5px #eee;
z-index: 1;
}
.responsive-input {
width: 240px;
height: 36px;
border-radius: 8px !important;
border: 1px solid #E5E7EB;
overflow: hidden;
:deep(.el-input__wrapper) {
box-shadow: none !important;
background-color: #F9FAFB;
}
}
.headimg {
background-color: #EFF6FF;
border: 1px solid #DBEAFE;
......@@ -90,6 +131,7 @@ const search = ref('');
.pt-2 {
padding-top: 2px;
}
.color {
color: #155DFC;
}
......@@ -102,4 +144,17 @@ const search = ref('');
.active {
color: #409eff;
}
.menuhover {
&:hover {
background-color: #F0F2F5;
border-radius: 4px;
}
}
</style>
<style lang="scss">
.el-popover {
&.el-popper {
padding: 4px 10px !important;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment