Compare commits
5 Commits
c9587d2006
...
39d1c81657
| Author | SHA1 | Date | |
|---|---|---|---|
| 39d1c81657 | |||
| f9df4c3f02 | |||
| bcfc4e12a0 | |||
|
|
ea36177f05 | ||
| 3094211152 |
@@ -1,8 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="stepper-wrapper">
|
<view class="stepper-wrapper border-box flex flex-items-center rounded-8">
|
||||||
<uni-icons type="minus" size="24" color="#999" @click="decrease" />
|
<uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
|
||||||
<text class="stepper-text">{{ value }}</text>
|
<text class="stepper-text text-center font-size-14 font-500 color-000">
|
||||||
<uni-icons type="plus" size="24" color="#999" @click="increase" />
|
{{ value }} {{ unit }}
|
||||||
|
</text>
|
||||||
|
<uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -23,6 +25,10 @@ const props = defineProps({
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: 100,
|
default: 100,
|
||||||
},
|
},
|
||||||
|
unit: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Emit
|
// Emit
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
.stepper-wrapper {
|
.stepper-wrapper {
|
||||||
display: flex;
|
background-color: #f3f9ff;
|
||||||
align-items: center;
|
padding: 4px 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stepper-text {
|
.stepper-text {
|
||||||
width: 40px;
|
width: 30px;
|
||||||
font-size: $uni-font-size-lg;
|
|
||||||
color: $uni-text-color;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|||||||
45
src/pages-booking/components/ConactSection/index.vue
Normal file
45
src/pages-booking/components/ConactSection/index.vue
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 选择数量 -->
|
||||||
|
<view
|
||||||
|
class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12"
|
||||||
|
>
|
||||||
|
<view class="flex-full">
|
||||||
|
<view class="font-size-16 font-500 color-000 line-height-24"
|
||||||
|
>选择数量</view
|
||||||
|
>
|
||||||
|
<view class="font-size-12 color-A3A3A3 line-height-16">
|
||||||
|
请选择套餐数量
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="right">
|
||||||
|
<Stepper v-model="quantity" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 联系方式 -->
|
||||||
|
<view class="bg-white rounded-12 overflow-hidden">
|
||||||
|
<view
|
||||||
|
class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12"
|
||||||
|
>联系方式</view
|
||||||
|
>
|
||||||
|
<view class="flex flex-items-center border-box p-12">
|
||||||
|
<view class="font-size-14 font-500 color-525866 mr-12"> 联系手机 </view>
|
||||||
|
<view class="right">
|
||||||
|
<input
|
||||||
|
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
|
||||||
|
placeholder="请输入联系手机"
|
||||||
|
maxlength="11"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import Stepper from "@/components/Stepper/index.vue";
|
||||||
|
|
||||||
|
const quantity = ref(1);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
45
src/pages-booking/components/UserSection/index.vue
Normal file
45
src/pages-booking/components/UserSection/index.vue
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<view class="bg-white rounded-12 overflow-hidden mb-12">
|
||||||
|
<view class="flex flex-items-center border-box p-12 border-bottom">
|
||||||
|
<view class="font-size-16 font-500 color-000 line-height-24 flex-full"
|
||||||
|
>入住信息</view
|
||||||
|
>
|
||||||
|
<view class="right">
|
||||||
|
<Stepper v-model="quantity" unit="间" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="border-box pl-12 pr-12">
|
||||||
|
<view class="border-box border-bottom pt-12 pb-12 flex flex-items-center">
|
||||||
|
<view class="font-size-14 font-500 color-525866 mr-12"> 住客姓名 </view>
|
||||||
|
<view class="right">
|
||||||
|
<input
|
||||||
|
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
maxlength="11"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex flex-items-center border-box pt-12 pb-12">
|
||||||
|
<view class="font-size-14 font-500 color-525866 mr-12"> 联系手机 </view>
|
||||||
|
<view class="right">
|
||||||
|
<input
|
||||||
|
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
|
||||||
|
placeholder="请输入联系手机"
|
||||||
|
maxlength="11"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import Stepper from "@/components/Stepper/index.vue";
|
||||||
|
|
||||||
|
const quantity = ref(1);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
61
src/pages-booking/index.vue
Normal file
61
src/pages-booking/index.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<view class="booking h-screen flex flex-col">
|
||||||
|
<TopNavBar
|
||||||
|
titleAlign="center"
|
||||||
|
backgroundColor="#D9EEFF"
|
||||||
|
backIconColor="#000"
|
||||||
|
:shadow="false"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
{{ title }}
|
||||||
|
</template>
|
||||||
|
</TopNavBar>
|
||||||
|
|
||||||
|
<view class="booking-content flex-full border-box p-12">
|
||||||
|
<!-- 预约内容 -->
|
||||||
|
<view class="border-box bg-white p-12 rounded-12 mb-12">
|
||||||
|
<view class="font-size-16 font-500 color-000 line-height-24"
|
||||||
|
>【温泉季】戏水单人票 +单人简餐</view
|
||||||
|
>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
|
||||||
|
>温泉早鸟票2张 黄南武辣子鸡2人套餐1份</view
|
||||||
|
>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="border-box flex flex-items-center flex-justify-between pt-12"
|
||||||
|
>
|
||||||
|
<text class="font-size-12 color-43669A line-height-18"
|
||||||
|
>使用时间:周一至周日9:00-22:00</text
|
||||||
|
>
|
||||||
|
<view class="flex flex-items-center">
|
||||||
|
<text class="font-size-12 color-2D91FF line-height-16"
|
||||||
|
>取消政策</text
|
||||||
|
>
|
||||||
|
<uni-icons type="right" size="15" color="#99A0AE" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 非酒店类型 -->
|
||||||
|
<ContactSection v-if="false" />
|
||||||
|
|
||||||
|
<!-- 酒店类型 -->
|
||||||
|
<UserSection />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||||||
|
import ContactSection from "./components/ConactSection/index.vue";
|
||||||
|
import UserSection from "./components/UserSection/index.vue";
|
||||||
|
|
||||||
|
const title = ref("预约");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./styles/index.scss";
|
||||||
|
</style>
|
||||||
4
src/pages-booking/styles/index.scss
Normal file
4
src/pages-booking/styles/index.scss
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
.booking {
|
||||||
|
background: linear-gradient(180deg, #d9eeff 0%, #f5f7fa 100%) 0 86px / 100%
|
||||||
|
100px no-repeat;
|
||||||
|
}
|
||||||
@@ -1,19 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<view
|
<view
|
||||||
class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
|
class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
|
||||||
@click="handleClick(item)"
|
@click.stop="handleClick(item)"
|
||||||
>
|
>
|
||||||
<image
|
<image
|
||||||
class="left rounded-10"
|
class="left rounded-10"
|
||||||
:src="item.commodityIcon"
|
:src="item.commodityPhoto"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
/>
|
/>
|
||||||
<view class="right border-box flex-full pl-12">
|
<view class="right border-box flex-full pl-12">
|
||||||
<view class="font-size-16 line-height-24 color-171717 mb-4">
|
<view class="font-size-16 line-height-24 color-171717 mb-4">
|
||||||
{{ item.commodityName }}
|
{{ item.commodityName }}
|
||||||
</view>
|
</view>
|
||||||
<view class="font-size-12 line-height-16 color-99A0AE mb-4">
|
<view
|
||||||
1 张 1.8 米大床
|
v-if="item.commodityFacility"
|
||||||
|
class="font-size-12 line-height-16 color-99A0AE mb-4"
|
||||||
|
>
|
||||||
|
{{ item.commodityFacility.join(" ") }}
|
||||||
</view>
|
</view>
|
||||||
<view class="font-size-12 line-height-18 color-43669A">
|
<view class="font-size-12 line-height-18 color-43669A">
|
||||||
{{ item.commodityTradeRuleList.join(" / ") }}
|
{{ item.commodityTradeRuleList.join(" / ") }}
|
||||||
@@ -23,12 +26,16 @@
|
|||||||
<text
|
<text
|
||||||
class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
|
class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
|
||||||
>
|
>
|
||||||
{{ item.commodityPrice }}
|
{{ item.specificationPrice }}
|
||||||
</text>
|
</text>
|
||||||
<text class="font-size-12 line-height-16 color-99A0AE">
|
<text class="font-size-12 line-height-16 color-99A0AE">
|
||||||
/{{ item.stockUnitLabel }}
|
/{{ item.stockUnitLabel }}
|
||||||
</text>
|
</text>
|
||||||
<text class="btn border-box rounded-10 color-white ml-16">订</text>
|
<text
|
||||||
|
class="btn border-box rounded-10 color-white ml-16"
|
||||||
|
@click.stop="handleBooking(item)"
|
||||||
|
>订</text
|
||||||
|
>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -43,10 +50,10 @@ const props = defineProps({
|
|||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
default: () => ({
|
default: () => ({
|
||||||
commodityIcon: "",
|
commodityPhoto: "",
|
||||||
commodityId: "",
|
commodityId: "",
|
||||||
commodityName: "",
|
commodityName: "",
|
||||||
commodityPrice: "",
|
specificationPrice: "",
|
||||||
commodityServices: [],
|
commodityServices: [],
|
||||||
commodityTags: [], // 商品标签
|
commodityTags: [], // 商品标签
|
||||||
commodityTradeRuleList: [], // 交易规则列表
|
commodityTradeRuleList: [], // 交易规则列表
|
||||||
@@ -59,6 +66,10 @@ const props = defineProps({
|
|||||||
const handleClick = ({ commodityId }) => {
|
const handleClick = ({ commodityId }) => {
|
||||||
uni.navigateTo({ url: `/pages/goods/index?commodityId=${commodityId}` });
|
uni.navigateTo({ url: `/pages/goods/index?commodityId=${commodityId}` });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleBooking = ({ commodityId }) => {
|
||||||
|
uni.navigateTo({ url: `/pages/booking/index?commodityId=${commodityId}` });
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -79,22 +79,27 @@ const selectedDate = ref({
|
|||||||
totalDays: 1,
|
totalDays: 1,
|
||||||
});
|
});
|
||||||
const dataList = ref([]);
|
const dataList = ref([]);
|
||||||
const commodityGroupDTOList = ref([]);
|
|
||||||
const paging = ref(null);
|
const paging = ref(null);
|
||||||
const currentType = ref("0"); // 当前选中类型
|
const currentType = ref("0"); // 当前选中类型
|
||||||
|
|
||||||
const queryList = async (pageNum = 1, pageSize = 10) => {
|
const queryList = async (pageNum = 1, pageSize = 10) => {
|
||||||
try {
|
try {
|
||||||
const res = await quickBookingList({
|
const params = {
|
||||||
commodityTypeCode: currentType.value,
|
commodityTypeCode: currentType.value,
|
||||||
size: pageSize,
|
size: pageSize,
|
||||||
current: pageNum,
|
current: pageNum,
|
||||||
});
|
};
|
||||||
console.log("API响应:", res.data.commodityGroupDTOList);
|
|
||||||
|
|
||||||
if (res && res.data && res.data.commodityGroupDTOList) {
|
if (currentType.value === "0") {
|
||||||
commodityGroupDTOList.value = res.data.commodityGroupDTOList;
|
params.checkInDate = selectedDate.value.startDate;
|
||||||
const records = res.data.commodityGroupDTOList[0].commodityList;
|
params.checkOutDate = selectedDate.value.endDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await quickBookingList(params);
|
||||||
|
console.log("API响应:", res.data.records);
|
||||||
|
|
||||||
|
if (res && res.data && res.data.records) {
|
||||||
|
const records = res.data.records;
|
||||||
|
|
||||||
// 完成数据加载,第二个参数表示是否还有更多数据
|
// 完成数据加载,第二个参数表示是否还有更多数据
|
||||||
paging.value.complete(records);
|
paging.value.complete(records);
|
||||||
@@ -112,13 +117,11 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
|
|||||||
const handleTabChange = ({ item }) => {
|
const handleTabChange = ({ item }) => {
|
||||||
console.log("item", item.value);
|
console.log("item", item.value);
|
||||||
currentType.value = item.value;
|
currentType.value = item.value;
|
||||||
// 从列表中找到对应的商品列表
|
|
||||||
const { commodityList } =
|
if (currentType.value === "0") {
|
||||||
commodityGroupDTOList.value.find(
|
}
|
||||||
(i) => i.commodityTypeCode === item.value
|
|
||||||
) || {};
|
paging.value.reload();
|
||||||
dataList.value = commodityList || [];
|
|
||||||
paging.value.complete(commodityList);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理日历关闭
|
// 处理日历关闭
|
||||||
@@ -131,6 +134,7 @@ const handleDateSelect = (data) => {
|
|||||||
selectedDate.value = data;
|
selectedDate.value = data;
|
||||||
calendarVisible.value = false;
|
calendarVisible.value = false;
|
||||||
console.log("选择的日期:", data);
|
console.log("选择的日期:", data);
|
||||||
|
paging.value.reload();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -64,6 +64,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"root": "pages-booking",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "index",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@@ -8,20 +8,22 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<scroll-view scroll-y class="scroll-container overflow-auto">
|
<scroll-view scroll-y class="scroll-container overflow-auto">
|
||||||
<view class="pl-8 pr-8 pb-24">
|
<view class="pl-4 pr-4 pb-24">
|
||||||
<view class="flex flex-wrap">
|
<view class="grid-container">
|
||||||
<view
|
<view
|
||||||
class="album-item"
|
class="album-item"
|
||||||
v-for="(item, index) in albumList"
|
v-for="(item, index) in albumList"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
|
<view class="album-image-wrapper">
|
||||||
<image
|
<image
|
||||||
class="album-image"
|
class="album-image"
|
||||||
:src="item.photoUrl"
|
:src="item.photoUrl"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
@click="handlePreview(item.photoUrl)"
|
@click="handlePreview(item.photoUrl)"
|
||||||
></image>
|
></image>
|
||||||
<view class="album-title">{{ item.title }}</view>
|
<view class="album-title">{{ item.name }}</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -53,35 +55,49 @@ const handlePreview = (photoUrl) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.scroll-container {
|
.grid-container {
|
||||||
flex: 1;
|
display: grid;
|
||||||
height: 100%;
|
grid-template-columns: repeat(2, 1fr); // 每行2列
|
||||||
|
grid-gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.album-item {
|
.album-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(50% - 8px);
|
width: 100%;
|
||||||
margin: 4px;
|
}
|
||||||
|
|
||||||
|
.album-image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1; // 保持宽高1:1
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.album-image {
|
.album-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 150px;
|
height: 100%;
|
||||||
border-radius: 8px;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.album-title {
|
.album-title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
right: 0;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, #000000 100%);
|
background: linear-gradient(
|
||||||
border-radius: 0 0 8px 8px;
|
180deg,
|
||||||
|
rgba(0, 0, 0, 0) 0%,
|
||||||
|
rgba(0, 0, 0, 0.6) 100%
|
||||||
|
);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -540,7 +540,7 @@ const initTypewriterManager = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
typewriterManager = new TypewriterManager({
|
typewriterManager = new TypewriterManager({
|
||||||
typingSpeed: 30,
|
typingSpeed: 10,
|
||||||
cursorText: "",
|
cursorText: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -16,6 +16,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tag-text {
|
.tag-text {
|
||||||
color: #00a6ff; /* 蓝色文字,可根据设计调整 */
|
color: #2d91ff; /* 蓝色文字,可根据设计调整 */
|
||||||
font-size: $uni-font-size-base;
|
font-size: $uni-font-size-base;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ export default {
|
|||||||
},
|
},
|
||||||
themeColor: {
|
themeColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "#00A6FF",
|
default: "#2D91FF",
|
||||||
},
|
},
|
||||||
codeBgColor: {
|
codeBgColor: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -45,6 +45,14 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: "PingFang SC, PingFang SC",
|
default: "PingFang SC, PingFang SC",
|
||||||
},
|
},
|
||||||
|
fontColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#171717",
|
||||||
|
},
|
||||||
|
fontSubColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#4D4D4D",
|
||||||
|
},
|
||||||
aiMode: {
|
aiMode: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
@@ -97,12 +105,15 @@ export default {
|
|||||||
const themeColor = this.themeColor;
|
const themeColor = this.themeColor;
|
||||||
const codeBgColor = this.codeBgColor;
|
const codeBgColor = this.codeBgColor;
|
||||||
const fontFamily = this.fontFamily;
|
const fontFamily = this.fontFamily;
|
||||||
|
const fontColor = this.fontColor;
|
||||||
|
const fontSubColor = this.fontSubColor;
|
||||||
let zeroStyle = {
|
let zeroStyle = {
|
||||||
p: `
|
p: `
|
||||||
margin:4px 0;
|
margin:4px 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height:1.65;
|
line-height:1.55;
|
||||||
font-family: ${fontFamily};
|
font-family: ${fontFamily};
|
||||||
|
color: ${fontColor};
|
||||||
`,
|
`,
|
||||||
// 一级标题
|
// 一级标题
|
||||||
h1: `
|
h1: `
|
||||||
@@ -149,12 +160,14 @@ export default {
|
|||||||
`,
|
`,
|
||||||
// 列表
|
// 列表
|
||||||
ul: `
|
ul: `
|
||||||
|
font-size: 14px;
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
color: #555;
|
color: ${fontSubColor};
|
||||||
`,
|
`,
|
||||||
li: `
|
li: `
|
||||||
|
font-size: 14px;
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
color: #555;
|
color: ${fontSubColor};
|
||||||
`,
|
`,
|
||||||
// 链接
|
// 链接
|
||||||
a: `
|
a: `
|
||||||
@@ -168,6 +181,7 @@ export default {
|
|||||||
`,
|
`,
|
||||||
// 斜体
|
// 斜体
|
||||||
em: `
|
em: `
|
||||||
|
font-size: 14px;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
font-family: ${fontFamily};
|
font-family: ${fontFamily};
|
||||||
letter-spacing:0.3em;
|
letter-spacing:0.3em;
|
||||||
@@ -191,11 +205,11 @@ export default {
|
|||||||
`,
|
`,
|
||||||
th: `
|
th: `
|
||||||
border: 1px solid #202121;
|
border: 1px solid #202121;
|
||||||
color: #555;
|
color: ${fontSubColor};
|
||||||
`,
|
`,
|
||||||
td: `
|
td: `
|
||||||
color:#555;
|
color: ${fontSubColor};
|
||||||
border: 1px solid #555555;
|
border: 1px solid ${fontSubColor};
|
||||||
`,
|
`,
|
||||||
pre: `
|
pre: `
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@@ -211,12 +225,15 @@ export default {
|
|||||||
const themeColor = this.themeColor;
|
const themeColor = this.themeColor;
|
||||||
const codeBgColor = this.codeBgColor;
|
const codeBgColor = this.codeBgColor;
|
||||||
const fontFamily = this.fontFamily;
|
const fontFamily = this.fontFamily;
|
||||||
|
const fontColor = this.fontColor;
|
||||||
|
const fontSubColor = this.fontSubColor;
|
||||||
let zeroStyle = {
|
let zeroStyle = {
|
||||||
p: `
|
p: `
|
||||||
margin:4px 0;
|
margin:4px 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height:1.55;
|
line-height:1.55;
|
||||||
font-family: ${fontFamily};
|
font-family: ${fontFamily};
|
||||||
|
color: ${fontColor};
|
||||||
`,
|
`,
|
||||||
// 一级标题
|
// 一级标题
|
||||||
h1: `
|
h1: `
|
||||||
@@ -272,11 +289,13 @@ export default {
|
|||||||
// 列表
|
// 列表
|
||||||
ul: `
|
ul: `
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
color: #555;
|
font-size: 14px;
|
||||||
|
color: ${fontSubColor};
|
||||||
`,
|
`,
|
||||||
li: `
|
li: `
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
color: #555;
|
font-size: 14px;
|
||||||
|
color: ${fontSubColor};
|
||||||
`,
|
`,
|
||||||
// 链接
|
// 链接
|
||||||
a: `
|
a: `
|
||||||
@@ -311,12 +330,12 @@ export default {
|
|||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
`,
|
`,
|
||||||
th: `
|
th: `
|
||||||
border: 1px solid #202121;
|
border: 1px solid ${fontSubColor};
|
||||||
color: #555;
|
color: ${fontSubColor};
|
||||||
`,
|
`,
|
||||||
td: `
|
td: `
|
||||||
color:#555;
|
color: ${fontSubColor};
|
||||||
border: 1px solid #555555;
|
border: 1px solid ${fontSubColor};
|
||||||
`,
|
`,
|
||||||
pre: `
|
pre: `
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ class TypewriterManager {
|
|||||||
constructor(options = {}) {
|
constructor(options = {}) {
|
||||||
// 配置选项
|
// 配置选项
|
||||||
this.options = {
|
this.options = {
|
||||||
typingSpeed: 50, // 打字速度(毫秒)
|
typingSpeed: 10, // 打字速度(毫秒)- 调整为更快的速度
|
||||||
cursorText: "", // 光标样式
|
cursorText: "", // 光标样式
|
||||||
...options,
|
...options,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user