Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0b1c0044 1 parent 6a84d17f

feat: 更新项目名称为'jgdl'并优化首页样式 

- 将项目名称从'myApp'改为'jgdl'，并更新相关配置文件
- 优化首页UI样式，包括背景色、按钮样式和卡片布局
- 调整收藏按钮样式和价格显示大小
- 移除部分冗余代码和注释
Inline Side-by-side
Showing 6 changed files with 30 additions and 30 deletions
......@@ -11,7 +11,7 @@ const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
export default defineConfig(async (merge) => {
const baseConfig = {
projectName: 'myApp',
projectName: 'jgdl',
date: '2025-6-28',
designWidth (input) {
// 配置 NutUI 375 尺寸
......
{
"name": "myApp",
"name": "jgdl",
"version": "1.0.0",
"private": true,
"description": "myApp",
"description": "捡个电驴",
"templateInfo": {
"name": "vue3-NutUI",
"typescript": false,
......
{
"miniprogramRoot": "./dist",
"projectname": "myApp",
"description": "myApp",
"projectname": "jgdl",
"description": "捡个电驴",
"appid": "touristappid",
"setting": {
"urlCheck": true,
......
{
"miniprogramRoot": "./",
"projectname": "myApp",
"description": "myApp",
"projectname": "jgdl",
"description": "捡个电驴",
"appid": "touristappid",
"setting": {
"urlCheck": true,
......
......@@ -8,7 +8,7 @@
<meta name="format-detection" content="telephone=no,address=no">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
<title>myApp</title>
<title>捡个电驴</title>
<script><%= htmlWebpackPlugin.options.script %></script>
</head>
<body>
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 21:09:43
* @LastEditTime: 2025-07-04 10:05:07
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
<template>
<view class="flex flex-col bg-orange-50 min-h-screen">
<view class="flex flex-col bg-orange-50 min-h-screen" style="background-color: #f6f6f6;">
<!-- Header -->
<nut-sticky>
<view class="bg-orange-400 p-4 pt-4 pb-4">
......@@ -27,7 +27,7 @@
</nut-sticky>
<!-- Banner -->
<view class="px-4 mt-4">
<view class="px-4 pt-4" style="background: linear-gradient( 180deg, #fb923c 0%, rgba(255,203,53,0) 61%);">
<nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#ffffff" auto-play="3000"
class="rounded-lg overflow-hidden" height="160">
<nut-swiper-item v-for="(image, index) in bannerImages" :key="index">
......@@ -40,19 +40,19 @@
<view class="px-4 mt-2">
<view class="flex justify-around py-4">
<view class="flex flex-col items-center" @tap="onNewCarClick">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<Clock size="20" color="#f97316" />
</view>
<text class="text-xs mt-1 text-gray-700">最新上架</text>
</view>
<view class="flex flex-col items-center" @tap="onGoodCarClick">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<Star size="20" color="#f97316" />
</view>
<text class="text-xs mt-1 text-gray-700">特价好车</text>
</view>
<view class="flex flex-col items-center" @tap="onCertifiedClick">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<Shop size="20" color="#f97316" />
</view>
<text class="text-xs mt-1 text-gray-700">认证车源</text>
......@@ -75,31 +75,31 @@
<view class="relative p-2">
<image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
class="w-full h-36 object-cover rounded-lg" />
<view class="absolute top-4 right-4 p-1" @tap.stop="() => toggleFavorite(scooter.id)">
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="20" :color="'#ffffff'" />
<HeartFill v-else size="20" :color="'#ef4444'" />
<view class="absolute top-4 right-3 w-7 h-7 rounded-full bg-white bg-opacity-90" @tap.stop="() => toggleFavorite(scooter.id)" style="padding-top: 12rpx; padding-left: 10rpx;">
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" :color="'#9ca3af'" />
<HeartFill v-else size="22" :color="'#ef4444'" />
</view>
<view v-if="scooter.isVerified"
class="absolute bottom-4 right-4 bg-orange-500 text-white text-xs px-1.5 py-0.5 rounded flex items-center">
class="absolute bottom-4 right-4 text-white text-xs px-1.5 py-0.5 rounded flex items-center" style="background-color: #EB5305;">
<Check size="12" color="#ffffff" class="mr-0.5" />
<text class="text-white">认证</text>
</view>
</view>
<view class="p-2">
<view class="p-2 pl-3">
<text class="font-medium text-sm block">{{ scooter.name }}</text>
<text class="text-xs text-gray-500 block">
{{ scooter.year }} ·
<text class="text-xs text-gray-500 block mt-1 mb-1">
{{ scooter.year }} · {{ scooter.school }}
<text v-if="scooter.batteryHealth">电池健康度{{ scooter.batteryHealth }}%</text>
<text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text>
</text>
<view class="mt-1">
<text class="text-orange-500 font-bold">
<text class="text-orange-500 font-bold" style="font-size: 1.25rem;">
¥{{ scooter.price.toLocaleString() }}
</text>
<text v-if="scooter.isVerified" class="ml-2 text-xs px-1 py-0.5 bg-orange-100 text-orange-500 rounded">
<!-- <text v-if="scooter.isVerified" class="ml-2 text-xs px-1 py-0.5 bg-orange-100 text-orange-500 rounded">
低于市场价10%
</text>
<text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text>
</text> -->
<!-- <text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text> -->
</view>
</view>
</view>
......@@ -123,15 +123,15 @@
<image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
class="w-full h-full object-cover rounded-lg" />
<view v-if="scooter.isVerified"
class="absolute bottom-3 right-3 bg-orange-500 text-white text-xs px-1 rounded flex items-center">
class="absolute bottom-3 right-3 text-white text-xs px-1 rounded flex items-center" style="background-color: #EB5305;">
<Check size="12" color="#ffffff" class="mr-0.5" />
<text class="text-white">认证</text>
</view>
</view>
<view class="flex-1 p-3 relative">
<view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)">
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="16" :color="'#9ca3af'" />
<HeartFill v-else size="16" :color="'#ef4444'" />
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" :color="'#9ca3af'" />
<HeartFill v-else size="22" :color="'#ef4444'" />
</view>
<text class="font-medium text-sm block">{{ scooter.name }}</text>
<text class="text-xs text-gray-600 mt-1 block">
......@@ -140,7 +140,7 @@
<text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text>
</text>
<view class="mt-2">
<text class="text-orange-500 font-bold">
<text class="text-orange-500 font-bold" style="font-size: 1.25rem;">
¥{{ scooter.price.toLocaleString() }}
</text>
<text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text>
......@@ -161,7 +161,7 @@ import Taro from '@tarojs/taro'
import '@tarojs/taro/html5.css' //和 nutui组件居然有冲突?
import { ref, onMounted } from 'vue'
import { useDidShow, useReady } from '@tarojs/taro'
import { Clock, Star, RectRight, Addfollow, Follow, Check, Search2, Shop, Heart1, HeartFill } from '@nutui/icons-vue-taro'
import { Clock, Star, RectRight, Check, Search2, Shop, Heart1, HeartFill } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'
import "./index.less";
......