From 30525332ad5d7407ba1477c6be3fb857ea049d62 Mon Sep 17 00:00:00 2001 From: Abbh1 <86962549+Abbh1@users.noreply.github.com> Date: Sun, 5 May 2024 16:58:03 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=E6=B7=BB=E5=8A=A0=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/Final/index.scss | 2 +- assets/css/Header/nav.scss | 32 +- assets/css/Popup/message-us.scss | 4 +- assets/css/business/list/index.scss | 188 +++++++++++ .../list_details}/index.scss | 0 .../list_details}/media.scss | 9 +- assets/css/business/{news => list}/media.scss | 2 +- assets/css/business/news/index.scss | 131 -------- assets/css/index/index.scss | 11 + components/Final/index.vue | 4 +- components/Header/HeaderNav.vue | 62 ++-- components/Header/index.vue | 4 +- components/Poster/index.vue | 24 +- pages/index.vue | 258 ++++++++++++++- pages/model/[idx]-[page].vue | 301 ++++++++++++++++++ pages/model/details/[id].vue | 165 ++++++++++ pages/news/[idx]-[page].vue | 2 - 17 files changed, 1011 insertions(+), 188 deletions(-) create mode 100644 assets/css/business/list/index.scss rename assets/css/business/{news/news_details => list/list_details}/index.scss (100%) rename assets/css/business/{news/news_details => list/list_details}/media.scss (79%) rename assets/css/business/{news => list}/media.scss (94%) delete mode 100644 assets/css/business/news/index.scss create mode 100644 pages/model/[idx]-[page].vue create mode 100644 pages/model/details/[id].vue diff --git a/assets/css/Final/index.scss b/assets/css/Final/index.scss index 2a84389..1e43294 100644 --- a/assets/css/Final/index.scss +++ b/assets/css/Final/index.scss @@ -70,7 +70,7 @@ .Final-left-info-item { display: flex; - margin: 10px 0; + margin: 10px; .Final-left-info-item-icon { margin-right: 10px; diff --git a/assets/css/Header/nav.scss b/assets/css/Header/nav.scss index d6711ee..46034c5 100644 --- a/assets/css/Header/nav.scss +++ b/assets/css/Header/nav.scss @@ -91,21 +91,49 @@ a { min-width: 190px; .HeaderNav-navItems-child-items { - padding: 10px 40px; word-break: keep-all; + position: relative; + + & a { + width: 100%; + padding: 10px 40px; + } &:hover { - a { + &>a { transition: .2s; color: #ade8dd !important; } } } + .HeaderNav-navItems-child-box-child-box { + box-shadow: 1px 1px 10px 0px #efefef; + background: #ffffff; + position: absolute; + border-radius: 5px; + z-index: 9999999999999999; + min-width: 190px; + left: 185px; + top: 0px; + + .HeaderNav-navItems-child-items { + // padding: 10px ; + word-break: keep-all; + + &:hover { + a { + transition: .2s; + color: #ade8dd !important; + } + } + } + } } + } } } \ No newline at end of file diff --git a/assets/css/Popup/message-us.scss b/assets/css/Popup/message-us.scss index baa5a40..bd97136 100644 --- a/assets/css/Popup/message-us.scss +++ b/assets/css/Popup/message-us.scss @@ -30,7 +30,7 @@ } .messageUs .eMailIco { - background: url("/img/emailIco.png") 16px center no-repeat #A72027; + background: url("/img/emailIco.png") 16px center no-repeat #82e7d4; background-size: 21px auto; } @@ -73,7 +73,7 @@ } .messageUsForm .btn { - background: #A72027; + background: #82e7d4; border-radius: 4px; width: 100%; box-sizing: border-box; diff --git a/assets/css/business/list/index.scss b/assets/css/business/list/index.scss new file mode 100644 index 0000000..3a28ce5 --- /dev/null +++ b/assets/css/business/list/index.scss @@ -0,0 +1,188 @@ +// 分类 +.category-big-box { + width: 100%; + height: 100%; + border-radius: 15px; + margin: 25px 0; + background-color: #F9F9F9; + padding: 20px 40px; +} + +.category-box { + width: 100%; + height: 100%; + position: relative; + display: flex; + margin-top: 15px; +} + +.category-left-box { + position: absolute; + left: 0; + top: 3px; +} + +.category-title { + font-weight: 800; + color: #666C72; + font-size: 15px; +} + +.category-right-box { + // position: absolute; + // left: 90px; + // top: 1px; + padding-left: 80px; + display: flex; + flex-wrap: wrap; +} + +.category-line { + width: 100%; + height: 1px; + border: 1px dashed #EFEFEF; + margin: 10px 0; +} + +.category-right-item { + font-weight: 600; + font-size: 14px; + color: #6C6C6C; + margin-right: 20px; + margin-bottom: 5px; + cursor: pointer; + padding: 5px 10px; + border-radius: 50px; +} + +.category-right-item-active { + font-weight: 600; + font-size: 14px; + color: #6C6C6C; + margin-right: 20px; + margin-bottom: 5px; + cursor: pointer; + padding: 5px 10px; + border-radius: 50px; + background-color: #3F3F3F; + color: #fff; +} + + +.sort { + color: #646464 !important; + font-size: 16px; + display: flex; + align-items: center; +} + +// 列表盒子 +.jump { + color: black; +} + +.content-list-box { + position: relative; + +} + +.content-box { + width: 100%; + height: 430px; + float: left; + background: #fff; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.075); + position: relative; + border-radius: 15px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + transition: all .3s ease 0s; + margin-bottom: 40px; + padding: 10px; + cursor: pointer; +} + +.content-box:hover { + transform: translateY(-5px); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); +} + +.content-img-box { + width: 100%; + height: 70%; + border-radius: 15px; + overflow: hidden; + margin-bottom: 15px; +} + +.content-img-box img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.content-box-content { + margin-left: 10px; +} + +.content-box-title { + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; +} + +.content-rate-box { + display: flex; + width: 100%; +} + + +.content-rate-icon-box { + display: flex; + margin-right: 15px; + align-items: center; + font-size: 15px; + color: #8FA0B7; +} + +.content-rate-icon { + margin-right: 3px; +} + +.content-line { + width: 100%; + height: 1px; + background-color: #F7F7F7; + margin: 8px 0; +} + +.content-user-box { + display: flex; + align-items: center; + justify-content: space-between; +} + +.content-user-img-box { + display: flex; + align-items: center; +} + +.content-user-name { + width: 120px; + margin-left: 10px; + font-size: 15px; + font-weight: normal; +} + +.content-user-send-time { + font-size: 14px; + font-weight: normal; + color: grey; +} + + +.page-box { + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/assets/css/business/news/news_details/index.scss b/assets/css/business/list/list_details/index.scss similarity index 100% rename from assets/css/business/news/news_details/index.scss rename to assets/css/business/list/list_details/index.scss diff --git a/assets/css/business/news/news_details/media.scss b/assets/css/business/list/list_details/media.scss similarity index 79% rename from assets/css/business/news/news_details/media.scss rename to assets/css/business/list/list_details/media.scss index 3c4b7c7..4e05539 100644 --- a/assets/css/business/news/news_details/media.scss +++ b/assets/css/business/list/list_details/media.scss @@ -1,6 +1,10 @@ /*1440px*/ /*大于*/ -@media screen and (min-width: 1440px) {} +@media screen and (min-width: 1440px) { + .container { + max-width: 1560px !important; + } +} /*小于*/ @media screen and (min-width: 1440px) {} @@ -25,9 +29,10 @@ /*小于*/ @media screen and (max-width: 480px) { - .Turn-the-page-box{ + .Turn-the-page-box { flex-direction: column; } + .return { display: none; } diff --git a/assets/css/business/news/media.scss b/assets/css/business/list/media.scss similarity index 94% rename from assets/css/business/news/media.scss rename to assets/css/business/list/media.scss index 2f13539..43e4adb 100644 --- a/assets/css/business/news/media.scss +++ b/assets/css/business/list/media.scss @@ -3,7 +3,7 @@ /*大于*/ @media screen and (min-width: 1440px) { .container { - max-width: 1420px; + max-width: 1560px !important; } } diff --git a/assets/css/business/news/index.scss b/assets/css/business/news/index.scss deleted file mode 100644 index 6718b81..0000000 --- a/assets/css/business/news/index.scss +++ /dev/null @@ -1,131 +0,0 @@ -// 新闻类型 -.news-titile-pos-box { - width: 100%; - display: flex; - justify-content: center; - margin: 50px 0; - - .news-title-box { - display: flex; - align-items: center; - - .news-title { - font-size: 24px; - font-weight: bold; - cursor: pointer; - transition: .4s; - } - - .news-title:hover { - color: #f08519; - } - - .news-title-active { - color: #f08519; - } - - .news-title-line { - width: 1px; - height: 36px; - background-color: #999999; - margin: 0 30px; - } - } -} - -// 新闻内容盒子 -.news-contianer { - margin: 0px auto; - height: 300px; - width: 80%; - display: flex; - align-items: center; - padding: 10px 35px; - transition: .4s; - cursor: pointer; - margin-bottom: 35px; -} - -.news-contianer:hover { - box-shadow: 0 0 15px 1px #e5e4e4; -} - -.news-content-box { - height: 65%; - width: 100%; - display: flex; - overflow: hidden; -} - -.news-cover-box { - overflow: hidden; - margin-right: 20px; - height: 100%; - width: 25%; - object-fit: cover; - - img { - height: 100%; - width: 100%; - object-fit: cover; - } -} - -.news-content-right-box { - width: 70%; -} - -.news-title { - font-weight: normal; - font-size: 18px; - letter-spacing: 1px; - color: rgb(51, 51, 51); -} - -.news-time { - font-size: 14px; - color: rgb(153, 153, 153); - margin: 15px 0px; -} - -.news-intro { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - margin-bottom: 24px; - color: rgb(102, 102, 102); - width: 100%; - text-align: justify; - line-height: 22px; -} - -// ted栏 -.Top_navigation { - display: flex; - justify-content: center; - z-index: 9; - position: relative; -} - -// 分页 -.page-box { - width: 100%; - display: flex; - justify-content: center; - - .page { - margin-bottom: 80px; - } -} - -.news-content-sublevel { - display: flex; - justify-content: space-between; -} - -.jump { - text-decoration: dashed; - color: black; -} \ No newline at end of file diff --git a/assets/css/index/index.scss b/assets/css/index/index.scss index 44be7f6..ff9a603 100644 --- a/assets/css/index/index.scss +++ b/assets/css/index/index.scss @@ -3,6 +3,14 @@ // background-color: black; } +section{ + padding: 30px 0; +} + +.index-bg{ + background-color: #F9F9F9; +} + h2 { margin: 0 0 45px; @@ -169,10 +177,13 @@ h2:after { color: grey; } + +// 按钮 .btn-box{ width: 100%; display: flex; justify-content: center; + margin-bottom: 50px; } .btn{ diff --git a/components/Final/index.vue b/components/Final/index.vue index 630ffa4..d7138fe 100644 --- a/components/Final/index.vue +++ b/components/Final/index.vue @@ -24,12 +24,12 @@
{{ $t('common.footer.desc') }}
-
+
diff --git a/components/Header/HeaderNav.vue b/components/Header/HeaderNav.vue index 96232d3..27baaf5 100644 --- a/components/Header/HeaderNav.vue +++ b/components/Header/HeaderNav.vue @@ -12,12 +12,11 @@ - - {{ _item.name }} - - - --> + + {{ _item.name }} + + + --> @@ -25,25 +24,30 @@ :class="currentRoute.indexOf(item.alias) != -1 ? 'HeaderNav-navItems nav-active' : 'HeaderNav-navItems'" v-for="item in props.navList" v-cloak :key="item.name"> {{ item.name }} - {{ item.name }} -
+ {{ item.name + }} +
- - {{ _item.name }} - + +
@@ -67,18 +71,22 @@ const currentRoute = route.currentRoute.value.matched[0]['name'] //事件 let navTimer = null -const enterNavEnter = e => { - let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0] +const enterNavEnter = (e, cn, fade) => { + + ;[...document.getElementsByClassName(cn)].map(item => item.classList.add('dNone')) + + let ele = e.target.parentElement.getElementsByClassName(cn)[0] ele && ele.classList.remove('dNone') clearInterval(navTimer) - navTimer = setTimeout(() => { + !fade && (navTimer = setTimeout(() => { ele && ele.classList.add('dNone') - }, 1000) + }, 1000)) } -const enterNavLeave = e => { - let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0] +const enterNavLeave = (e, cn) => { + console.log(cn, 123); + let ele = e.target.parentElement.getElementsByClassName(cn)[0] ele && ele.classList.add('dNone') } diff --git a/components/Header/index.vue b/components/Header/index.vue index 7d2db88..f068b43 100644 --- a/components/Header/index.vue +++ b/components/Header/index.vue @@ -80,8 +80,8 @@ let navList = ref([ { name: "模型", children: [], - href: '/about', - alias: 'about' + href: '/model/1-1', + alias: 'model' }, { name: "动画", diff --git a/components/Poster/index.vue b/components/Poster/index.vue index 98e3e9e..1b86960 100644 --- a/components/Poster/index.vue +++ b/components/Poster/index.vue @@ -4,8 +4,8 @@
-
{{ props.title }}
-
{{ props.text }}
+
{{ posterInfo.title }}
+
{{ posterInfo.text }}
@@ -23,24 +23,24 @@ const props = defineProps({ }) const initState = { - imgSrc: '/img/product_list/banner2.jpg', + imgSrc: '', title: '', text: '' } let posterInfo = ref({ ...initState }) let posterStyle = { - height: '23vw', + height: '8vw', } // 获取海报 -// useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => { -// const data = JSON.parse(res.data.value).data -// posterInfo.value = data || { ...initState } - -// setTimeout(() => { -// htmlAddAnimations() -// }); -// }) +useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => { + const data = JSON.parse(res.data.value).data + posterInfo.value = data + console.log(data,'啊实打实大苏打') + setTimeout(() => { + htmlAddAnimations() + }); +}) diff --git a/pages/index.vue b/pages/index.vue index 0649a83..6f9ff58 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -14,7 +14,7 @@
-
+
@@ -43,7 +43,7 @@
-
+

精选推荐NEW

@@ -85,7 +85,7 @@
+ src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
西瓜西了西
2024-03-01
@@ -104,12 +104,262 @@
+ +
+
+ +
+

Unity工程

+
+ +
+
+
+
+ +
+ +
+
Blneder 微动态场景 旅途中
+
+
+ + + +
333
+
+
+ + + +
2
+
+
+ + + +
12
+
+
+ +
+ +
+
+ +
西瓜西了西
+
+
2024-03-01
+
+ +
+ +
+
+
+ +
+ 查看更多 +
+
+
+ + + +
+
+ +
+

模型推荐

+
+ +
+
+
+
+ +
+ +
+
Blneder 微动态场景 旅途中
+
+
+ + + +
333
+
+
+ + + +
2
+
+
+ + + +
12
+
+
+ +
+ +
+
+ +
西瓜西了西
+
+
2024-03-01
+
+ +
+ +
+
+
+ +
+ 查看更多 +
+
+
+ + + +
+
+ +
+

动画资源

+
+ +
+
+
+
+ +
+ +
+
Blneder 微动态场景 旅途中
+
+
+ + + +
333
+
+
+ + + +
2
+
+
+ + + +
12
+
+
+ +
+ +
+
+ +
西瓜西了西
+
+
2024-03-01
+
+ +
+ +
+
+
+ +
+ 查看更多 +
+
+
+ + + +
+
+ +
+

软件下载

+
+ +
+
+
+
+ +
+ +
+
Blneder 微动态场景 旅途中
+
+
+ + + +
333
+
+
+ + + +
2
+
+
+ + + +
12
+
+
+ +
+ +
+
+ +
西瓜西了西
+
+
2024-03-01
+
+ +
+ +
+
+
+ +
+ 查看更多 +
+
+
- + + + + \ No newline at end of file diff --git a/pages/model/details/[id].vue b/pages/model/details/[id].vue new file mode 100644 index 0000000..f4ff80c --- /dev/null +++ b/pages/model/details/[id].vue @@ -0,0 +1,165 @@ + + + + + \ No newline at end of file diff --git a/pages/news/[idx]-[page].vue b/pages/news/[idx]-[page].vue index c7ac34d..a4495cd 100644 --- a/pages/news/[idx]-[page].vue +++ b/pages/news/[idx]-[page].vue @@ -124,8 +124,6 @@ onMounted(() => { }) - -