feat: add new features, update theme and build config
- Add 40+ new UI components including chat modules, discovery cards, photo galleries, FAQ and booking tools - Standardize brand color across all styles by replacing $theme-color-500 SCSS variables with #0ccd58 - Add sass 1.58.3 dependency and update vite config for modern scss compiler support - Refactor existing components (AddCarCrad, login page) and remove unused /quick/list router route - Add utility functions for URL parameter handling - Add static assets including custom znicons font, component images and icons - Fix scss syntax issues and deprecation warnings
This commit is contained in:
duanshuwen
70
src/pages/home/components/FacilityLocationCard/index.vue
Normal file
70
src/pages/home/components/FacilityLocationCard/index.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
|
||||
<img class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
|
||||
|
||||
<div class="facility-location-card__body px-24 pb-24">
|
||||
<div class="facility-location-card__title-row flex flex-items-center">
|
||||
<div class="facility-location-card__badge color-2563EB bg-EFF6FF font-size-12 font-900">
|
||||
{{ type.text }}
|
||||
</div>
|
||||
<div class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
|
||||
{{ data.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="facility-location-card__distance flex flex-items-center color-94A3B8 font-size-14 font-900">
|
||||
<span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
|
||||
<span>{{ distance.text }}</span>
|
||||
</div>
|
||||
|
||||
<div class="facility-location-card__location bg-F8FAFC rounded-20">
|
||||
<div class="facility-location-card__location-label flex flex-items-center color-64748B font-size-13 font-900">
|
||||
<span class="facility-location-card__location-dot">{{ location.icon }}</span>
|
||||
<span>{{ location.label }}</span>
|
||||
</div>
|
||||
<div class="facility-location-card__location-text color-1E293B font-size-16 font-900">
|
||||
{{ location.text }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
|
||||
:class="{ 'is-disabled': disabled }" @click="handleAction">
|
||||
<span class="facility-location-card__button-icon">{{ action.icon }}</span>
|
||||
<span>{{ action.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["action", "select"]);
|
||||
|
||||
const type = computed(() => props.data.type || {});
|
||||
const distance = computed(() => props.data.distance || {});
|
||||
const location = computed(() => props.data.location || {});
|
||||
const action = computed(() => props.data.action || {});
|
||||
|
||||
const handleAction = () => {
|
||||
if (props.disabled) return;
|
||||
emit("action", props.data);
|
||||
emit("select", props.data);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
21
src/pages/home/components/FacilityLocationCard/mocks.js
Normal file
21
src/pages/home/components/FacilityLocationCard/mocks.js
Normal file
@@ -0,0 +1,21 @@
|
||||
export default {
|
||||
id: "wolongtan-restroom",
|
||||
title: "卧龙潭公厕",
|
||||
image: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=900&q=80",
|
||||
type: {
|
||||
text: "厕所",
|
||||
},
|
||||
distance: {
|
||||
icon: "⌖",
|
||||
text: "距你约 200 米",
|
||||
},
|
||||
location: {
|
||||
icon: "●",
|
||||
label: "所在位置",
|
||||
text: "卧龙潭景点入口右侧",
|
||||
},
|
||||
action: {
|
||||
icon: "↗",
|
||||
text: "带我去",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,87 @@
|
||||
.facility-location-card {
|
||||
border: 1px solid rgba(226, 232, 240, 0.72);
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.facility-location-card__image {
|
||||
height: 184px;
|
||||
}
|
||||
|
||||
.facility-location-card__body {
|
||||
padding-top: 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.facility-location-card__title-row {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.facility-location-card__badge {
|
||||
height: 30px;
|
||||
margin-right: 12px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 10px;
|
||||
line-height: 30px;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.facility-location-card__title {
|
||||
min-width: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.facility-location-card__distance {
|
||||
margin-top: 8px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.facility-location-card__distance-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.facility-location-card__location {
|
||||
margin-top: 24px;
|
||||
padding: 18px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.facility-location-card__location-label {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.facility-location-card__location-dot {
|
||||
margin-right: 8px;
|
||||
color: #ec4899;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.facility-location-card__location-text {
|
||||
margin-top: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.facility-location-card__button {
|
||||
height: 54px;
|
||||
margin-top: 20px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.facility-location-card__button:active {
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.facility-location-card__button.is-disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.facility-location-card__button-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 19px;
|
||||
line-height: 19px;
|
||||
}
|
||||
Reference in New Issue
Block a user