fix(components): 修复搜索页样式错乱
This commit is contained in:
@@ -55,6 +55,7 @@ const config = {
|
||||
},
|
||||
sass: {
|
||||
data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
|
||||
silenceDeprecations: ['import'],
|
||||
},
|
||||
alias: {
|
||||
'@': join(__dirname, '..', 'src'),
|
||||
@@ -98,7 +99,7 @@ const config = {
|
||||
},
|
||||
},
|
||||
cssModules: {
|
||||
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
|
||||
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
|
||||
config: {
|
||||
namingPattern: 'module', // 转换模式，取值为 global/module
|
||||
generateScopedName: '[name]__[local]___[hash:base64:5]',
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
// @ts-nocheck
|
||||
|
||||
module.exports = {
|
||||
env: {
|
||||
NODE_ENV: '"production"',
|
||||
},
|
||||
mini: {},
|
||||
h5: {
|
||||
/**
|
||||
* WebpackChain 插件配置
|
||||
* @docs https://github.com/neutrinojs/webpack-chain
|
||||
*/
|
||||
// webpackChain (chain) {
|
||||
// /**
|
||||
// * 如果 h5 端编译后体积过大,可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
|
||||
// * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
|
||||
// */
|
||||
// chain.plugin('analyzer')
|
||||
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
|
||||
// /**
|
||||
// * 如果 h5 端首屏加载时间过长,可以使用 prerender-spa-plugin 插件预加载首页。
|
||||
// * @docs https://github.com/chrisvfritz/prerender-spa-plugin
|
||||
// */
|
||||
// const path = require('path')
|
||||
// const Prerender = require('prerender-spa-plugin')
|
||||
// const staticDir = path.join(__dirname, '..', 'dist')
|
||||
// chain
|
||||
// .plugin('prerender')
|
||||
// .use(new Prerender({
|
||||
// staticDir,
|
||||
// routes: [ '/pages/index/index' ],
|
||||
// postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
|
||||
// }))
|
||||
// }
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "jdt-user",
|
||||
"version": "4.0.16",
|
||||
"version": "4.0.17",
|
||||
"taroConfig": {
|
||||
"version": "4.0.16"
|
||||
"version": "4.0.17"
|
||||
},
|
||||
"scripts": {
|
||||
"build:weapp": "taro build --type weapp",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="flex justify-center" v-if="storeList.length > 0">
|
||||
<view v-if="storeList.length > 0">
|
||||
<view
|
||||
class="bg-white rounded-[15px] mt-3 p-2 w-[95%] flex items-center"
|
||||
v-for="(item, index) in storeList"
|
||||
|
||||
@@ -315,32 +315,32 @@ const toMerDetails = item => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './home-new.scss';
|
||||
|
||||
/* 所有新版样式包裹在 .home-new 作用域下 */
|
||||
.home-new {
|
||||
/* Header Styles */
|
||||
.header-fixed {
|
||||
background-color: #f5f6f7;
|
||||
min-height: 100vh;
|
||||
/* Header Styles */
|
||||
.header-fixed {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: linear-gradient(180deg, #eff6ff 0%, #f5f6f7 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
.header-content {
|
||||
padding: 10px 20px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.location-bar {
|
||||
.location-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
font-size: 22px;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.location-inner {
|
||||
.location-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 90%;
|
||||
@@ -348,55 +348,55 @@ const toMerDetails = item => {
|
||||
padding: 8px 16px;
|
||||
border-radius: 50px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
.location-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-right: 8px;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
.location-text {
|
||||
.location-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.location-arrow {
|
||||
.location-arrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 8px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
.search-container {
|
||||
position: relative;
|
||||
// margin: 10px auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
.search-input {
|
||||
height: 70px;
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
padding: 10px 20px 10px 70px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon-left {
|
||||
.search-icon-left {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9ca3af;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
@@ -412,15 +412,15 @@ const toMerDetails = item => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
padding: 0 20px 180px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Banner Hero */
|
||||
.banner-hero {
|
||||
/* Banner Hero */
|
||||
.banner-hero {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
@@ -428,83 +428,83 @@ const toMerDetails = item => {
|
||||
height: 280px;
|
||||
margin-top: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-decoration {
|
||||
.banner-decoration {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-decoration-top {
|
||||
.banner-decoration-top {
|
||||
top: -80px;
|
||||
right: -80px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-decoration-bottom {
|
||||
.banner-decoration-bottom {
|
||||
bottom: -60px;
|
||||
left: -60px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background-color: rgba(147, 197, 253, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-inner {
|
||||
.banner-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
.banner-title {
|
||||
font-size: 60px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: 4px;
|
||||
font-style: italic;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-title-yellow {
|
||||
.banner-title-yellow {
|
||||
color: #fde047;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-subtitle-wrapper {
|
||||
.banner-subtitle-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-divider {
|
||||
.banner-divider {
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
.banner-subtitle {
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-buttons {
|
||||
.banner-buttons {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
.banner-btn {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
padding: 15px 0;
|
||||
@@ -516,50 +516,50 @@ const toMerDetails = item => {
|
||||
gap: 8px;
|
||||
pointer-events: none;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-btn-primary {
|
||||
.banner-btn-primary {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-btn-secondary {
|
||||
.banner-btn-secondary {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-btn-icon {
|
||||
.banner-btn-icon {
|
||||
font-size: 36px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation Grid */
|
||||
.nav-grid-wrapper {
|
||||
/* Navigation Grid */
|
||||
.nav-grid-wrapper {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
margin-top: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-grid {
|
||||
.nav-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon-wrapper {
|
||||
.nav-icon-wrapper {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
@@ -568,14 +568,14 @@ const toMerDetails = item => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
.nav-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
.nav-label {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
@@ -584,51 +584,51 @@ const toMerDetails = item => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Featured Section */
|
||||
.featured-section {
|
||||
/* Featured Section */
|
||||
.featured-section {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: 280px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-card {
|
||||
.featured-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-card-left {
|
||||
.featured-card-left {
|
||||
flex: 1.2;
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
|
||||
border: 1px solid #fed7aa;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-content {
|
||||
.featured-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
.featured-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #1f2937;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-desc {
|
||||
.featured-desc {
|
||||
font-size: 20px;
|
||||
color: #f97316;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-btn {
|
||||
.featured-btn {
|
||||
margin-top: 20px;
|
||||
background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
|
||||
color: #ffffff;
|
||||
@@ -640,79 +640,83 @@ const toMerDetails = item => {
|
||||
display: inline-block;
|
||||
line-height: 1.5;
|
||||
box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-bg {
|
||||
.featured-bg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-svg {
|
||||
.featured-svg {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
color: #ea580c;
|
||||
transform: rotate(-12deg) translate(30px, 30px);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-card-right {
|
||||
.featured-card-right {
|
||||
flex: 1;
|
||||
border: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-image {
|
||||
.featured-image {
|
||||
height: 67%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-img {
|
||||
.featured-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-overlay {
|
||||
.featured-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-overlay-title {
|
||||
.featured-overlay-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-footer {
|
||||
.featured-footer {
|
||||
height: 33%;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-footer-left {
|
||||
.featured-footer-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-footer-title {
|
||||
.featured-footer-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #1f2937;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-footer-arrow {
|
||||
.featured-footer-arrow {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
@@ -722,47 +726,47 @@ const toMerDetails = item => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Store Section */
|
||||
.store-section {
|
||||
/* Store Section */
|
||||
.store-section {
|
||||
padding-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.store-header {
|
||||
.store-header {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #1f2937;
|
||||
padding: 0 8px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.store-header-line {
|
||||
.store-header-line {
|
||||
width: 6px;
|
||||
height: 30px;
|
||||
background-color: #fa2c19;
|
||||
border-radius: 50px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.store-list {
|
||||
.store-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.store-item {
|
||||
.store-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #f9fafb;
|
||||
}
|
||||
}
|
||||
|
||||
.store-image-wrapper {
|
||||
.store-image-wrapper {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
flex-shrink: 0;
|
||||
@@ -770,14 +774,14 @@ const toMerDetails = item => {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.store-image {
|
||||
.store-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.store-badge {
|
||||
.store-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -787,9 +791,9 @@ const toMerDetails = item => {
|
||||
padding: 4px 12px;
|
||||
border-bottom-right-radius: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.store-info {
|
||||
.store-info {
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -797,9 +801,9 @@ const toMerDetails = item => {
|
||||
height: 180px;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.store-name {
|
||||
.store-name {
|
||||
font-weight: bold;
|
||||
color: #1f2937;
|
||||
font-size: 30px;
|
||||
@@ -807,68 +811,67 @@ const toMerDetails = item => {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.store-rating {
|
||||
.store-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-stars {
|
||||
.rating-stars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.stars-text {
|
||||
.stars-text {
|
||||
color: #fbbf24;
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-score {
|
||||
.rating-score {
|
||||
color: #fa2c19;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-divider {
|
||||
.rating-divider {
|
||||
color: #d1d5db;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-sales {
|
||||
.rating-sales {
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.store-distance {
|
||||
.store-distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.distance-placeholder {
|
||||
.distance-placeholder {
|
||||
font-size: 22px;
|
||||
color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.distance-text {
|
||||
.distance-text {
|
||||
font-size: 22px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
|
||||
.store-empty {
|
||||
.store-empty {
|
||||
text-align: center;
|
||||
padding: 80px 0;
|
||||
color: #9ca3af;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
.iconfont {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
} /* .home-new 作用域结束 */
|
||||
</style>
|
||||
|
||||
@@ -237,9 +237,130 @@ const toPage = item => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 旧版样式包裹在 .home-old 作用域下 */
|
||||
/* 旧版样式 - 所有样式包裹在 .home-old 作用域下 */
|
||||
page {
|
||||
background-image: url('//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png');
|
||||
background-size: 100% 57%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.home-old {
|
||||
@import './home-old.scss';
|
||||
.local {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 30px auto;
|
||||
display: flex;
|
||||
border-radius: 18px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
width: 730px;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background-color: #f83d3d;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
.title {
|
||||
width: 600px;
|
||||
height: 90px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.jf-btn {
|
||||
margin: 15px auto;
|
||||
background-image: url('//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png');
|
||||
background-size: 100% 100%;
|
||||
width: 350px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
|
||||
.btn-1 {
|
||||
background-image: url('//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png');
|
||||
background-size: 100% 100%;
|
||||
width: 200px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.btn-2 {
|
||||
// background-image: url('//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png');
|
||||
background-image: url('../../../static/game_banner.png');
|
||||
background-size: 100% 100%;
|
||||
width: 300px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.btn-3 {
|
||||
background-image: url('//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png');
|
||||
background-size: 100% 100%;
|
||||
width: 200px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 40px;
|
||||
margin: 20px;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 32px 0;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
background-size: 100% 100%;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #333333;
|
||||
font-size: 26px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ad {
|
||||
// background-image: url('https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png');
|
||||
background-image: url('https://pic.imgdb.cn/item/6697aa0dd9c307b7e95c94d9.png');
|
||||
background-size: 100% 100%;
|
||||
height: 180px;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
/* HomeNew 页面样式 */
|
||||
page {
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
|
||||
.home-new {
|
||||
background-color: #f5f6f7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
page {
|
||||
background-image: url('//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png');
|
||||
background-size: 100% 57%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.local {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 30px auto;
|
||||
display: flex;
|
||||
border-radius: 18px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
width: 730px;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background-color: #f83d3d;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
.title {
|
||||
width: 600px;
|
||||
height: 90px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.jf-btn {
|
||||
margin: 15px auto;
|
||||
background-image: url('//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png');
|
||||
background-size: 100% 100%;
|
||||
width: 350px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
|
||||
.btn-1 {
|
||||
background-image: url('//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png');
|
||||
background-size: 100% 100%;
|
||||
width: 200px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.btn-2 {
|
||||
// background-image: url('//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png');
|
||||
background-image: url('../../../static/game_banner.png');
|
||||
background-size: 100% 100%;
|
||||
width: 300px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.btn-3 {
|
||||
background-image: url('//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png');
|
||||
background-size: 100% 100%;
|
||||
width: 200px;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 40px;
|
||||
margin: 20px;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 32px 0;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
background-size: 100% 100%;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #333333;
|
||||
font-size: 26px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ad {
|
||||
// background-image: url('https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png');
|
||||
background-image: url('https://pic.imgdb.cn/item/6697aa0dd9c307b7e95c94d9.png');
|
||||
background-size: 100% 100%;
|
||||
height: 180px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<HomeNew v-if="isNewHome" />
|
||||
<HomeOld v-else />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -10,10 +8,7 @@ import { ref } from 'vue';
|
||||
import HomeOld from './components/HomeOld.vue';
|
||||
import HomeNew from './components/HomeNew.vue';
|
||||
|
||||
const isNewHome = ref(process.env.TARO_APP_SHOW_NEW_HOME === 'yes');
|
||||
|
||||
console.log(process.env.TARO_APP_SHOW_NEW_HOME);
|
||||
console.log(isNewHome.value);
|
||||
const isNewHome = process.env.TARO_APP_SHOW_NEW_HOME === 'yes';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -25,10 +25,16 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-page">
|
||||
<MerList v-if="classId" v-model="classId" />
|
||||
<Storelist v-else v-model="name" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss"></style>
|
||||
<style lang="scss">
|
||||
.search-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f6f7;
|
||||
background-image: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user