diff --git a/src/pages/home/AlbumDetail.vue b/src/pages/home/AlbumDetail.vue index 75c8ef8..27c2c66 100644 --- a/src/pages/home/AlbumDetail.vue +++ b/src/pages/home/AlbumDetail.vue @@ -3,21 +3,11 @@ ref="page" >
-
- -
- -
- - - -
-
+ +
+
@@ -27,7 +17,14 @@ -
{{ state.index + 1 }}/{{ state.detail.imgs.length }}
+
+ {{ state.index + 1 }}/{{ state.detail.imgs.length }} +
+
+
+
@@ -36,7 +33,7 @@
店铺名
-
进店
+
关注
@@ -68,20 +65,20 @@
- -
进店
+ +
678
- -
客服
+ +
178
- -
购物车
+ +
82
- -
购物车
+ +
23
@@ -95,6 +92,7 @@ import {reactive, ref} from "vue"; import goods from "@/assets/data/goods"; import {useNav} from "@/utils/hooks/useNav"; import Utils from "@/utils"; +import {Icon} from "@iconify/vue"; let activeIndexs = ref([]) const nav = useNav() @@ -121,7 +119,7 @@ function scroll() { const state = reactive({ detail: goods.list[1], - index: 2, + index: 0, list: goods.list, listEl: null, fixed: false @@ -154,52 +152,17 @@ function toggle(i) { top: 0; width: 100vw; z-index: 9; + display: flex; + justify-content: space-between; + padding: 15rem; + box-sizing: border-box; - .top { - height: var(--common-header-height); - display: flex; - align-items: center; - padding: 0 10rem; - - svg { - font-size: 22rem; - background: rgba(176, 176, 176, 0.4); - padding: 5rem; - color: white; - border-radius: 50%; - } - - .right { - margin-left: 10rem; - flex: 1; - display: flex; - align-items: center; - justify-content: space-between; - - .search { - font-size: 12rem; - border-radius: 20rem; - padding: 5rem 10rem; - flex: 1; - background: rgb(243, 243, 243); - display: flex; - align-items: center; - color: gray; - visibility: hidden; - - svg { - padding: 0; - background: unset; - } - } - - .option { - margin-left: 15rem; - display: flex; - align-items: center; - gap: 8rem; - } - } + svg { + font-size: 20rem; + background: rgba(176, 176, 176, 0.4); + padding: 5rem; + color: white; + border-radius: 50%; } } @@ -214,6 +177,26 @@ function toggle(i) { touch-action: none; } + .indicator-bar { + position: absolute; + bottom: 5rem; + left: 3vw; + width: 94vw; + display: flex; + gap: 5rem; + + .indicator { + background: rgba(162, 160, 160, 0.5); + height: 3rem; + flex: 1; + border-radius: 2rem; + } + + .active { + background: rgba(250, 246, 246, 0.58); + } + } + .index { font-size: 12rem; position: absolute; @@ -281,7 +264,8 @@ function toggle(i) { width: 20rem; height: 20rem; } - &:last-child{ + + &:last-child { margin-bottom: 0; } } @@ -340,14 +324,16 @@ function toggle(i) { background: var(--color-message); border-top: 1px solid rgba(white, .1); display: flex; - padding: 10rem; + align-items: center; + padding: 8rem 10rem; + padding-right: 0; box-sizing: border-box; gap: 6rem; .input-wrap { width: 110rem; padding-left: 15rem; - height: 40rem; + height: 34rem; border-radius: 30rem; background: var(--second-btn-color-tran); color: gray; @@ -365,17 +351,11 @@ function toggle(i) { justify-content: center; align-items: center; flex-direction: column; - font-size: 11rem; - color: #646464; + font-size: 13rem; + color: white; svg { - font-size: 18rem; - } - - &:first-child { - svg { - color: red; - } + font-size: 24rem; } } } diff --git a/src/pages/home/SearchPage.vue b/src/pages/home/SearchPage.vue index 2879d17..17c24e9 100644 --- a/src/pages/home/SearchPage.vue +++ b/src/pages/home/SearchPage.vue @@ -4,10 +4,8 @@ -
@@ -742,9 +740,9 @@ export default { display: flex; align-items: center; justify-content: space-between; + color: var(--second-text-color); .right { - color: var(--second-text-color); display: flex; align-items: center; @@ -770,7 +768,6 @@ export default { .desc { max-width: 80%; - font-size: 14rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/src/router/routes.js b/src/router/routes.js index 1a811d4..330b7bf 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -79,7 +79,6 @@ const routes = [ {path: '/home/music', component: Music}, {path: '/home/music-rank-list', component: MusicRankList}, {path: '/home/live', component: LivePage}, - {path: '/home/search', component: Search}, {path: '/shop/detail', component: GoodsDetail}, @@ -151,6 +150,8 @@ const routes = [ {path: '/video-detail', name: 'video-detail', component: VideoDetail}, {path: '/album-detail', name: 'video-detail', component: AlbumDetail}, + {path: '/home/search', component: Search}, + ] export default routes \ No newline at end of file