diff --git a/packages/localLife/classify/index.css b/packages/localLife/classify/index.css index e69de29b..05f78da8 100644 --- a/packages/localLife/classify/index.css +++ b/packages/localLife/classify/index.css @@ -0,0 +1,386 @@ +page { + background-color: #fff; +} + +.header { + display: flex; + align-items: center; + position: relative; + z-index: 1; +} + +.header_tit { + flex: 1; + text-align: center; + position: relative; + z-index: 0; +} + +.header .u-icon { + position: relative; + z-index: 2; + padding: 20rpx; + margin-left: 10rpx; +} + +.localBox { + font-size: 26rpx; + color: #222222; + box-sizing: border-box; + width: 100%; + padding-bottom: 20rpx; + background-color: #f6f7fb; +} + +.localBoxItem{ + width: 100%; + display: flex; + align-items: center; + padding: 0 20rpx; + background-color: #fff; +} + +.local { + display: flex; + width: auto; + white-space: nowrap; +} + +#local { + height: 30rpx; + width: 28.08rpx; + margin-right: 17rpx; +} + +.u-icon { + margin-left: 10rpx; +} + +.search { + flex: 1; + padding: 20rpx 0; + margin-left: 15rpx; +} + +.searchBox { + width: 93%; + height: 70rpx; + background: #f6f7fb; + border-radius: 100rpx; + display: flex; + box-sizing: border-box; + align-items: center; + padding-left: 30rpx; + padding-right: 30rpx; +} + +.searchBox image { + width: 30rpx; + height: 30rpx; + margin-right: 16rpx; +} + + +.swiperBox { + height: 350rpx; + width: 100%; + position: relative; +} + +.swiper { + height: 350rpx; + width: 100%; + /* position: relative; */ +} + +.navList { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + height: 350rpx; + width: 100%; + padding: 30rpx 20rpx; + background-color: #fff; + margin-top: 20rpx; +} + +.navItem { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 116rpx; + height: 105rpx; + margin-right: 34rpx; + margin-bottom: 43rpx; +} + +.navItemImg { + width: 70rpx; + height: 70rpx; + display: flex; + justify-content: center; + align-items: center; +} + +.navItem image { + width: 70rpx; + height: 70rpx; +} + +.navItem:nth-child(5n) { + margin-right: 0; +} + +.dot { + display: flex; + align-items: center; + justify-content: center; + margin-top: 20rpx; + position: absolute; + left: 50%; + bottom: 25rpx; + transform: translateX(-50%); +} + +.dotItem { + width: 8rpx; + height: 8rpx; + border-radius: 50%; + background-color: #E6E6E6; + margin-right: 5rpx; +} + +.actives { + width: 20rpx; + height: 8rpx; + background: #FF370B; + border-radius: 10rpx 10rpx 10rpx 10rpx; +} + +.scrollBox { + background-color: #f6f7fb; + padding-bottom: 25rpx; + padding-top: 20rpx; +} + +.scrollView { + display: flex; + align-items: center; + flex-wrap: nowrap; + padding: 0 14rpx; +} + + +.scroll-viewItem { + display: flex; + white-space: nowrap; + height: 54rpx; + background: #FFFFFF; + border-radius: 10rpx 10rpx 10rpx 10rpx; + border: 1rpx solid #FFFFFF; + padding: 10rpx 18rpx; + margin-right: 10rpx; + position: relative; + display: flex; + align-items: center; +} + +.scroll-viewItem image { + width: 22rpx; + height: 22rpx; + position: absolute; + left: 7rpx; + top: 5rpx; +} + +.btnList { + width: 389rpx; + height: 119rpx; + background: #FFFFFF; + border-radius: 100rpx 100rpx 100rpx 100rpx; + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 200rpx; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; +} + +.btnList_after { + width: 389rpx; + height: 119rpx; + filter: blur(8.600000381469727rpx); + background: rgba(0, 0, 0, 0.3); + border-radius: 100rpx 100rpx 100rpx 100rpx; + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 200rpx; + border-radius: 100rpx 100rpx 100rpx 100rpx; + +} + + +.btn_left { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 22rpx; + color: #000000; +} + +.btn_left image { + width: 47.97rpx; + height: 44.79rpx; + margin-bottom: 6rpx; +} + +.btn_right { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 22rpx; + color: #000000; +} + +.btn_right image { + height: 47rpx; + width: 47rpx; + margin-bottom: 6rpx; +} + +.line { + width: 1rpx; + height: 82rpx; + border-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(215, 215, 215, 1), rgba(255, 255, 255, 1)) 1 1; +} + +.lines { + background-color: #f5f7f9; + height: 40rpx; + width: 100%; +} + +.merchantList { + padding: 0 20rpx; + width: 100%; + box-sizing: border-box; +} + +.merchantItem { + display: flex; + padding-top: 30px; + padding-bottom: 30rpx; + border-bottom: 1rpx solid #EBEBEB; + ; +} + +.merchantItem_left { + width: 180rpx; + height: 180rpx; + border-radius: 20rpx 20rpx 20rpx 20rpx; + overflow: hidden; + margin-right: 24rpx; +} + +.merchantItem_left image { + width: 100%; + height: 100%; +} + +.merchantItem_right { + flex: 1; +} + +.merchantItem_right_tit { + display: flex; + align-items: center; + justify-content: space-between; +} + +.merchantItem_right_tit_left { + font-size: 30rpx; + color: #222222; +} + +.merchantItem_right_tit_right { + font-size: 24rpx; + color: #555555; +} + +.merchantItem_right_con { + margin-top: 14rpx; + display: flex; + align-items: center; + justify-content: space-between; +} + +.merchangtItem_tag { + font-size: 22rpx; + color: #555555; + padding: 5rpx 12rpx; + white-space: nowrap; + background: rgba(255, 81, 42, 0.1); + border-radius: 100rpx 100rpx 100rpx 100rpx; + display: inline-block; + margin-top: 20rpx; + margin-right: 10rpx; +} + +.startList { + display: flex; + align-items: center; +} + +.startList image { + width: 22rpx; + height: 22rpx; + margin-right: 3rpx; +} + +.merchantItem_right_con_right { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 26rpx; + color: #000000; + +} + +.merchantItem_right_con_right image { + width: 32rpx; + height: 28.59rpx; + margin-bottom: 6rpx; +} + +.merchantItem_right_add { + font-size: 24rpx; + color: #999999; + margin-top: 14rpx; +} + +.empty { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-weight: normal; + font-size: 28rpx; + color: #999999; + margin-top: 110rpx; + width: 100%; +} + +.empty image { + width: 366rpx; + height: 226rpx; + margin-bottom: 27rpx; +} \ No newline at end of file diff --git a/pages/index/index.css b/pages/index/index.css index 4de82fc0..884f465e 100644 --- a/pages/index/index.css +++ b/pages/index/index.css @@ -1,3 +1,23 @@ +.not_found_404 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 80vh; +} + +.not_found_text { + font-size: 80rpx; + font-weight: bold; + color: #000; +} + +.not_found_desc { + font-size: 40rpx; + font-weight: 400; + color: #000; +} + .container { background-color: #f9f9f9; } diff --git a/pages/index/index.vue b/pages/index/index.vue index a0d7fa28..224eff8a 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,216 +1,228 @@