diff --git a/src/views/index/Index.vue b/.history/src/views/index/Index_20221011111727.vue
similarity index 100%
rename from src/views/index/Index.vue
rename to .history/src/views/index/Index_20221011111727.vue
diff --git a/.history/src/views/index/Index_20221011113318.vue b/.history/src/views/index/Index_20221011113318.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6a164f6198810ce538f087c3960471ba38c4ff36
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113318.vue
@@ -0,0 +1,9 @@
+<template>
+  <h1></h1>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/.history/src/views/index/Index_20221011113320.vue b/.history/src/views/index/Index_20221011113320.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3dd1b4116dbeff2fdac18e62f9544c890f3b6e42
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113320.vue
@@ -0,0 +1,9 @@
+<template>
+  <h1>hello</h1>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/.history/src/views/index/Index_20221011113632.vue b/.history/src/views/index/Index_20221011113632.vue
new file mode 100644
index 0000000000000000000000000000000000000000..909df7b77fc3f89cc8649b71814afcfbcb7b5fcd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113632.vue
@@ -0,0 +1,9 @@
+<template>
+  
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/.history/src/views/index/Index_20221011113638.vue b/.history/src/views/index/Index_20221011113638.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ecccdca13fa73559d405669e042448f10fb1b7b0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113638.vue
@@ -0,0 +1,9 @@
+<template>
+  header
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/.history/src/views/index/Index_20221011113639.vue b/.history/src/views/index/Index_20221011113639.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5420236a398d8a0d478c57488b80f7663200bb06
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113639.vue
@@ -0,0 +1,9 @@
+<template>
+  <header></header>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/.history/src/views/index/Index_20221011113642.vue b/.history/src/views/index/Index_20221011113642.vue
new file mode 100644
index 0000000000000000000000000000000000000000..909df7b77fc3f89cc8649b71814afcfbcb7b5fcd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113642.vue
@@ -0,0 +1,9 @@
+<template>
+  
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/.history/src/views/index/Index_20221011113644.vue b/.history/src/views/index/Index_20221011113644.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a94ac65598c4332378caceca28a6db59f6064ac
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113644.vue
@@ -0,0 +1,9 @@
+<template>
+  div.
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/.history/src/views/index/Index_20221011113649.vue b/.history/src/views/index/Index_20221011113649.vue
new file mode 100644
index 0000000000000000000000000000000000000000..137c1bad8ce0bd09dc1164a31e53563f9226adaa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113649.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="banner">
+    
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/.history/src/views/index/Index_20221011113700.vue b/.history/src/views/index/Index_20221011113700.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d126f5aede9f2ef6ddba7695ca963eb34c7c3c24
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113700.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/.history/src/views/index/Index_20221011113704.vue b/.history/src/views/index/Index_20221011113704.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7e94362066be90f985a85995e093e3ff7a7da0f9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113704.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113706.vue b/.history/src/views/index/Index_20221011113706.vue
new file mode 100644
index 0000000000000000000000000000000000000000..58beeb32cffe74d88894f7d0c264a1deccdebfaf
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113706.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  back
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113708.vue b/.history/src/views/index/Index_20221011113708.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7e8475c8f99f44a006ec744b5b89723e6673bcbe
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113708.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: ;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113726.vue b/.history/src/views/index/Index_20221011113726.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7fafc9cab3722b28d9eec2937c369d4d60120e20
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113726.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(red, green, blue);
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113728.vue b/.history/src/views/index/Index_20221011113728.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5c5f47b47632609354e340918b5f6f2dbff07bdb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113728.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, green, blue);
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113738.vue b/.history/src/views/index/Index_20221011113738.vue
new file mode 100644
index 0000000000000000000000000000000000000000..344efa675a4e31a9c368b53a4317730cf6218a2e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113738.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, 230, blue);
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113743.vue b/.history/src/views/index/Index_20221011113743.vue
new file mode 100644
index 0000000000000000000000000000000000000000..864f76e1f636e1151c518c9211a5d4df059231f8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113743.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, 230, 25);
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113744.vue b/.history/src/views/index/Index_20221011113744.vue
new file mode 100644
index 0000000000000000000000000000000000000000..52bde969e174bacc229fe4baa9db430317955b02
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113744.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, 230, 255);
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113751.vue b/.history/src/views/index/Index_20221011113751.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2aed5ad4a6f8cebd3c399775dbf29d16c9b615a4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113751.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, 230, 255);
+  wid
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113755.vue b/.history/src/views/index/Index_20221011113755.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9af5e1862695cee323a53607113280a53bdaee2e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113755.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-c
+  olor: rgb(220, 230, 255);
+  width: 100%;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113756.vue b/.history/src/views/index/Index_20221011113756.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f7fc30daabccd8a1af0a965536c22288513af373
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113756.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113759.vue b/.history/src/views/index/Index_20221011113759.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53526b14b644577a1ae51ba14f6b640756327918
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113759.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: ;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113817.vue b/.history/src/views/index/Index_20221011113817.vue
new file mode 100644
index 0000000000000000000000000000000000000000..11f13e677b3d6eba2e2b8ca193d9d9e77054f69b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113817.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113818.vue b/.history/src/views/index/Index_20221011113818.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce6782d1ec4608448e9f31066cdd1b5ed70cf417
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113818.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="banner">
+
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner{
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113822.vue b/.history/src/views/index/Index_20221011113822.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd9db24ac25039ec0875871c72717bfbb196f2ca
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113822.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113856.vue b/.history/src/views/index/Index_20221011113856.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66ebde3d93c7bb639626e65291049bd8616728b1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113856.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113858.vue b/.history/src/views/index/Index_20221011113858.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bbd83ed65657fe75417f2349216571d98e09acea
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113858.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113900.vue b/.history/src/views/index/Index_20221011113900.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d8eb88f4c37c320cbdac4ba3e482160136be4db
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113900.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-radius: ;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113903.vue b/.history/src/views/index/Index_20221011113903.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f86a67cfbd7274cb19837086c150c3952289f045
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113903.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113916.vue b/.history/src/views/index/Index_20221011113916.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe12d8e32647ee3b02bd5e74faff2628a0259d5c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113916.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-radius-: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113919.vue b/.history/src/views/index/Index_20221011113919.vue
new file mode 100644
index 0000000000000000000000000000000000000000..647488d1d631afef869bad8731b245edf3e337bd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113919.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113933.vue b/.history/src/views/index/Index_20221011113933.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d7b0e0385285806273d21f76ffa125d03f9d02ed
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113933.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113935.vue b/.history/src/views/index/Index_20221011113935.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbd2a7d33c6b821d06740d3cec7c72e94d93ee4e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113935.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-left-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011113938.vue b/.history/src/views/index/Index_20221011113938.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6d1ef61cc6460d8973806186e8fa7fb44c95841
--- /dev/null
+++ b/.history/src/views/index/Index_20221011113938.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="banner"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114539.vue b/.history/src/views/index/Index_20221011114539.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50f9394998104d812f4bfc9f54ce91e883c313b7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114539.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="head"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114540.vue b/.history/src/views/index/Index_20221011114540.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af80c5376fdea30f700fd41e22c7febc009c7ec0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114540.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="header"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114546.vue b/.history/src/views/index/Index_20221011114546.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e032cfd3ec3289289654e1ac88057a7bc60be3a4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114546.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class=""></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114552.vue b/.history/src/views/index/Index_20221011114552.vue
new file mode 100644
index 0000000000000000000000000000000000000000..516477213c18e80a828cf3c1894c1f37e5379783
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114552.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="h_header"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114558.vue b/.history/src/views/index/Index_20221011114558.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb8af3fbebb785f47af94b0cf57f92204d4806d8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114558.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="h_header"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114605.vue b/.history/src/views/index/Index_20221011114605.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c22a6cf9568f0c6776d983a3b0307b0e419df0dc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114605.vue
@@ -0,0 +1,18 @@
+<template>
+<div></div>
+  <div class="h_header"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114608.vue b/.history/src/views/index/Index_20221011114608.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bfe48d43197c9c63bc0116ccbcf2a526d171962c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114608.vue
@@ -0,0 +1,18 @@
+<template>
+<div></div>
+  
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114609.vue b/.history/src/views/index/Index_20221011114609.vue
new file mode 100644
index 0000000000000000000000000000000000000000..433386e99978b9b18a53636c43b1a2bf7babdeb7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114609.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114620.vue b/.history/src/views/index/Index_20221011114620.vue
new file mode 100644
index 0000000000000000000000000000000000000000..57732b25738d0c8696fd75b26f006e8885fb93ea
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114620.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="h_header">
+      div
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114623.vue b/.history/src/views/index/Index_20221011114623.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d2237c1ce4cf7bde8a87bd1eb45339d0d11e1c00
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114623.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114630.vue b/.history/src/views/index/Index_20221011114630.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ca64fd339bbc7e84f87a960f9a702d3aca48917
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114630.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114650.vue b/.history/src/views/index/Index_20221011114650.vue
new file mode 100644
index 0000000000000000000000000000000000000000..734a2a5a3a8b9997adff61c6dc9753bbbfb162be
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114650.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    wid
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114652.vue b/.history/src/views/index/Index_20221011114652.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7caea5001d8bb7cb898d97824dd6edf5fc3ab3b9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114652.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114655.vue b/.history/src/views/index/Index_20221011114655.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ed74565baf0dd02ac75666160176a65eb8aabd3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114655.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114657.vue b/.history/src/views/index/Index_20221011114657.vue
new file mode 100644
index 0000000000000000000000000000000000000000..79f52af5319ec5462e7a81060af0628e368d639f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114657.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114659.vue b/.history/src/views/index/Index_20221011114659.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ddeedb179034a66ca27f476b5449217a8beb6241
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114659.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: 261px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114701.vue b/.history/src/views/index/Index_20221011114701.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e375583c25e1ef696390bb4cf7394b4401bf4f28
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114701.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: 260px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114704.vue b/.history/src/views/index/Index_20221011114704.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb0a95be7ea4b8c9eb93272b1ef8e7f65982b4a7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114704.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: 260px;
+    mar
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114709.vue b/.history/src/views/index/Index_20221011114709.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf25464c52f532d11169a837fc8e0d5bcf1ac376
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114709.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: 260px;
+    margin-top: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114721.vue b/.history/src/views/index/Index_20221011114721.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dce7a34c6ab5f59387dd9fc81e8040c814337518
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114721.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    back
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114723.vue b/.history/src/views/index/Index_20221011114723.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f1046050879cc0ecb357aeae40e9c2d623d05e0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114723.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114727.vue b/.history/src/views/index/Index_20221011114727.vue
new file mode 100644
index 0000000000000000000000000000000000000000..80dee199460a3650e0e3fcf7e91b8cb687af23f4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114727.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114730.vue b/.history/src/views/index/Index_20221011114730.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8b82a1b4ff7ea4bd4b0ce5c44a64ecde02369d9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114730.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner{
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color:red ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114732.vue b/.history/src/views/index/Index_20221011114732.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17c9c2ffaba512ae8686be27c7c35ab0f5ff6d99
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114732.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114803.vue b/.history/src/views/index/Index_20221011114803.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47e670475da795c107bdef513263dab09e1092a0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114803.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  over
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114804.vue b/.history/src/views/index/Index_20221011114804.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a8bd28eaf02d1d27707ef99b2f640c2720792774
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114804.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: ;
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114806.vue b/.history/src/views/index/Index_20221011114806.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6d5b83e0769c1faf975c1eff88f2c0b479d1f785
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114806.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114824.vue b/.history/src/views/index/Index_20221011114824.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b21b4c290e0ef451b7f61e8f9ad203953b386c7d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114824.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114826.vue b/.history/src/views/index/Index_20221011114826.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9a772e4e008f6de9a055ebd152143bb34430cb1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114826.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  margin-top: 95px;
+  background-color: red;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114832.vue b/.history/src/views/index/Index_20221011114832.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6d5b83e0769c1faf975c1eff88f2c0b479d1f785
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114832.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header">
+      <div class="banner"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114854.vue b/.history/src/views/index/Index_20221011114854.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ecb6a0d74a6b4a3b9dad9fe4d50e53658247b9da
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114854.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114855.vue b/.history/src/views/index/Index_20221011114855.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a135b909f00c6a2bade28dddbb2ad148dff945c5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114855.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114902.vue b/.history/src/views/index/Index_20221011114902.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea9ed12bc2ba52abb2861416c18fc517a05073c8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114902.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114903.vue b/.history/src/views/index/Index_20221011114903.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e6e2b35998d75ec593e81c70aee67173eb6fb986
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114903.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114904.vue b/.history/src/views/index/Index_20221011114904.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b92a28103db1385fb3b832870863ffd2977107f9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114904.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+</style>
diff --git a/.history/src/views/index/Index_20221011114906.vue b/.history/src/views/index/Index_20221011114906.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3df7895562bac065df8ea7ea16cfb32dac6b9afd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114906.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  margin-top: 95px;
+  background-color: red;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114911.vue b/.history/src/views/index/Index_20221011114911.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a33eb256488af2857d3da74a3352fd27dc5af892
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114911.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114921.vue b/.history/src/views/index/Index_20221011114921.vue
new file mode 100644
index 0000000000000000000000000000000000000000..685b5ab4e70b5be822274ff0207d3720d79d38eb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114921.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  mar
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114922.vue b/.history/src/views/index/Index_20221011114922.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75a56ba39655f84fa36f59471be0ad3b69442e13
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114922.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: ;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114924.vue b/.history/src/views/index/Index_20221011114924.vue
new file mode 100644
index 0000000000000000000000000000000000000000..614bc7c6c35c0cd2ed8f668c5432502b9a784659
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114924.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 a;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114926.vue b/.history/src/views/index/Index_20221011114926.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f018850aa5e29861dfab9d1b4cb6fce6cfb1789
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114926.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  overflow: hidden;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114935.vue b/.history/src/views/index/Index_20221011114935.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c05093c0620830be07352d5a8c4dc42bb6c236d6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114935.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114937.vue b/.history/src/views/index/Index_20221011114937.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17faf61cd6ac0f3b73006fee48386fd56b015746
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114937.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  pos
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114939.vue b/.history/src/views/index/Index_20221011114939.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5887e3f6b05ebd03907a1ba53d929f8c48eb6922
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114939.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  position: ;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114941.vue b/.history/src/views/index/Index_20221011114941.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0317fa079838bbed4a589fb10f5ea48a5dec2188
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114941.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  position: relative;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114945.vue b/.history/src/views/index/Index_20221011114945.vue
new file mode 100644
index 0000000000000000000000000000000000000000..628d5d8f82b87a79029ec0a1df52063056b11b1f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114945.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  position: relative;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  pos
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114946.vue b/.history/src/views/index/Index_20221011114946.vue
new file mode 100644
index 0000000000000000000000000000000000000000..314fd118447de3605e8dd6f0fe6750b3c4d0f555
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114946.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  position: relative;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  position: a;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011114948.vue b/.history/src/views/index/Index_20221011114948.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8cfc9c307c99bb2d43aa717996c18ccfd98d7b9a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011114948.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  position: relative;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115038.vue b/.history/src/views/index/Index_20221011115038.vue
new file mode 100644
index 0000000000000000000000000000000000000000..72bf0d8e32f2463c3a2feba3ff18324f925d1082
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115038.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115039.vue b/.history/src/views/index/Index_20221011115039.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7e8716002751ba5f9bb4a778ea4a848bf0f4aaad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115039.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  t
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115041.vue b/.history/src/views/index/Index_20221011115041.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8cb6302bf7ded63ad86049ba1945672d71e4f18e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115041.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  top
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115042.vue b/.history/src/views/index/Index_20221011115042.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf82a05a6ea127f057d2b177e518debf6195e0ee
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115042.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  top: ;
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115045.vue b/.history/src/views/index/Index_20221011115045.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb6bd5aea533ffeca14d3a903abf48163ed9a79c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115045.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  top: 95px;
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115053.vue b/.history/src/views/index/Index_20221011115053.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2166acf5986205cb1c22516b92e04ba9f00386c7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115053.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  top: 95px;
+  // position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115058.vue b/.history/src/views/index/Index_20221011115058.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb6bd5aea533ffeca14d3a903abf48163ed9a79c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115058.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  top: 95px;
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115101.vue b/.history/src/views/index/Index_20221011115101.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1aa1349fddda1ccc4a449a49531fdf3bf78a7440
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115101.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  top: 95px;
+  position: relative;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115105.vue b/.history/src/views/index/Index_20221011115105.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb6bd5aea533ffeca14d3a903abf48163ed9a79c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115105.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  margin: 0 auto;
+  top: 95px;
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115110.vue b/.history/src/views/index/Index_20221011115110.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2734337da84ca3448ba281c1358fc6a89862f1df
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115110.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115113.vue b/.history/src/views/index/Index_20221011115113.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f91c9d52e4c48fe4fae6fe61736156994e03953
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115113.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115114.vue b/.history/src/views/index/Index_20221011115114.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c81815859ef28972727244ef76af271ca1e44254
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115114.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+    .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115118.vue b/.history/src/views/index/Index_20221011115118.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eccdbd1dc0ae0f1b1dc4d02c800d7e310e722a62
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115118.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  .banner {
+    width: 700px;
+    height: 260px;
+    margin-top: 95px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115130.vue b/.history/src/views/index/Index_20221011115130.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2734337da84ca3448ba281c1358fc6a89862f1df
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115130.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115137.vue b/.history/src/views/index/Index_20221011115137.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c42df73a1ed3e835f451e4c9be8bb9972dcdd512
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115137.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  mar
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115138.vue b/.history/src/views/index/Index_20221011115138.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c81413a4f058681779fa03c648a74975d3afb998
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115138.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin: ;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115140.vue b/.history/src/views/index/Index_20221011115140.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b9d664110322fa0794ab4ee40eda1dde54974f15
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115140.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin: a;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115141.vue b/.history/src/views/index/Index_20221011115141.vue
new file mode 100644
index 0000000000000000000000000000000000000000..602e18440b387fd50b35f2afd7f3cf4978ea0bab
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115141.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin: auto;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115227.vue b/.history/src/views/index/Index_20221011115227.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f91c9d52e4c48fe4fae6fe61736156994e03953
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115227.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115240.vue b/.history/src/views/index/Index_20221011115240.vue
new file mode 100644
index 0000000000000000000000000000000000000000..083a5a1ce7d7a81156743a7fceb7fbc73af8ccca
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115240.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  ma
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115244.vue b/.history/src/views/index/Index_20221011115244.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c42df73a1ed3e835f451e4c9be8bb9972dcdd512
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115244.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  mar
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011115248.vue b/.history/src/views/index/Index_20221011115248.vue
new file mode 100644
index 0000000000000000000000000000000000000000..332d73b171a2380b1620338b717d1d08e8cedd5d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011115248.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135715.vue b/.history/src/views/index/Index_20221011135715.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68b7844485b31218a9712e3722d6de4615a84557
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135715.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135816.vue b/.history/src/views/index/Index_20221011135816.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b2ac58485bce44de06fd585892261aa8268bfee
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135816.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135818.vue b/.history/src/views/index/Index_20221011135818.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd2360b78ae3d339ec96129280ca664b561f354a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135818.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135821.vue b/.history/src/views/index/Index_20221011135821.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dda466cdea61abf415b4b6bb4d00fa70339ba0b5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135821.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  mar
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135824.vue b/.history/src/views/index/Index_20221011135824.vue
new file mode 100644
index 0000000000000000000000000000000000000000..86dff830419884218a6036348aa36d8f05e7ba9d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135824.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  margin-top: ;
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135826.vue b/.history/src/views/index/Index_20221011135826.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f8336b0de19b413a2deff38266bb402fd54e5c8f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135826.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  margin-top: 26px;
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135839.vue b/.history/src/views/index/Index_20221011135839.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5455a71ccd09d036c806630461e372fed2f52f8e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135839.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  dsi
+  margin-top: 26px;
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135840.vue b/.history/src/views/index/Index_20221011135840.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53fa887631404303c6d3844c2e0b31a412a0dd39
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135840.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  display: ;
+  margin-top: 26px;
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135842.vue b/.history/src/views/index/Index_20221011135842.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68ac4b35dd8a8729851c248780738982e3521500
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135842.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  display: block;
+  margin-top: 26px;
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135857.vue b/.history/src/views/index/Index_20221011135857.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c442d7d5076c77593b92b41d81112fab1efffb9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135857.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  display: block;
+  margin-top: 26px;
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135904.vue b/.history/src/views/index/Index_20221011135904.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6850bb8b35badd4670621df7d2618b6a4af0ac3f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135904.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+span{
+  display: block;
+  margin-top: 26px;
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135911.vue b/.history/src/views/index/Index_20221011135911.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da271fd3c9e954482efb27c36315247220f65cb4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135911.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all{
+  
+}
+span{
+  display: block;
+  margin-top: 26px;
+}
+.h_header {
+  background-color: rgb(220, 230, 255);
+  width: 100%;
+  height: 245px;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.banner {
+  width: 700px;
+  height: 260px;
+  background-color: red;
+  top: 95px;
+  position: absolute;
+  margin-left: 24px;
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135916.vue b/.history/src/views/index/Index_20221011135916.vue
new file mode 100644
index 0000000000000000000000000000000000000000..425dce3c64b2e4b71fad1119cbf4d9e12daaa1e2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135916.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all{
+
+}
+
+</style>
diff --git a/.history/src/views/index/Index_20221011135918.vue b/.history/src/views/index/Index_20221011135918.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d57321007fb2193c15518ee04eae3fb89ffc974
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135918.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135921.vue b/.history/src/views/index/Index_20221011135921.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c83111e9651dcce49db755254e2d971f6dfc05a7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135921.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135923.vue b/.history/src/views/index/Index_20221011135923.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66e80bf3e5a96d438640e510cebeb3612084b444
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135923.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: ;
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135925.vue b/.history/src/views/index/Index_20221011135925.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59240aed8420dd975fde8009aaefccf478395604
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135925.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135939.vue b/.history/src/views/index/Index_20221011135939.vue
new file mode 100644
index 0000000000000000000000000000000000000000..361ab9c8324aed01f35f72fc5b8f8177c18d810e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135939.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    // margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011135947.vue b/.history/src/views/index/Index_20221011135947.vue
new file mode 100644
index 0000000000000000000000000000000000000000..16e6645e9630092757c7cbb95005bcf44aa16ea5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011135947.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <!-- <span><van-icon name="location-o" /></span> -->
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    // margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140003.vue b/.history/src/views/index/Index_20221011140003.vue
new file mode 100644
index 0000000000000000000000000000000000000000..361ab9c8324aed01f35f72fc5b8f8177c18d810e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140003.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    // margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140037.vue b/.history/src/views/index/Index_20221011140037.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59240aed8420dd975fde8009aaefccf478395604
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140037.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140044.vue b/.history/src/views/index/Index_20221011140044.vue
new file mode 100644
index 0000000000000000000000000000000000000000..37501005c626485012685f94aef7f9e2be42667b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140044.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    // display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140058.vue b/.history/src/views/index/Index_20221011140058.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59240aed8420dd975fde8009aaefccf478395604
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140058.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140133.vue b/.history/src/views/index/Index_20221011140133.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d57321007fb2193c15518ee04eae3fb89ffc974
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140133.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140135.vue b/.history/src/views/index/Index_20221011140135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..660ff91d900be7e520ce1a09f0beef2c9ccd44c4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140135.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+    
+  overflow: hidden;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140139.vue b/.history/src/views/index/Index_20221011140139.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5e3adbe131c640f22bd018a97e356a7621a7c19
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140139.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+
+    overflow: hidden;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140144.vue b/.history/src/views/index/Index_20221011140144.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d57321007fb2193c15518ee04eae3fb89ffc974
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140144.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="all">
+    <span><van-icon name="location-o" /></span>
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140154.vue b/.history/src/views/index/Index_20221011140154.vue
new file mode 100644
index 0000000000000000000000000000000000000000..677adfd4db77fcc7d62d90b59dfcdb7eea9a8180
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140154.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="all">
+    <!-- <span><van-icon name="location-o" /></span> -->
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140219.vue b/.history/src/views/index/Index_20221011140219.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9789544db9abac163267c572930dd33b9c4e2727
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140219.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="all">
+
+    <div class="h_header"></div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140222.vue b/.history/src/views/index/Index_20221011140222.vue
new file mode 100644
index 0000000000000000000000000000000000000000..beb7733fa88136d497dbe2f2e223ad0c907150d5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140222.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+
+    <div class="h_header">
+          <!-- <span><van-icon name="location-o" /></span> --> 
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140225.vue b/.history/src/views/index/Index_20221011140225.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d0f9ffea2a2ffb03fbccff7791e30ae2350998d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140225.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+
+    <div class="h_header">
+          <span><van-icon name="location-o" /></span> 
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140227.vue b/.history/src/views/index/Index_20221011140227.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c2baace4ec2e3df0e04db3cf98f8ea81a53ff99
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140227.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140240.vue b/.history/src/views/index/Index_20221011140240.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e8b0a5b64b38c0a375cceabdf25c9bb98142ecb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140240.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140247.vue b/.history/src/views/index/Index_20221011140247.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9599cbe1bf627cc589077034f3d5aeef9dffbad2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140247.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    // margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140253.vue b/.history/src/views/index/Index_20221011140253.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e8b0a5b64b38c0a375cceabdf25c9bb98142ecb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140253.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+  span {
+    display: block;
+    margin-top: 26px;
+  }
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140256.vue b/.history/src/views/index/Index_20221011140256.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b8dadaf2e5c0cbf546c65b57b54a0796d6994aef
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140256.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140258.vue b/.history/src/views/index/Index_20221011140258.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a490543ffcfd2633cf4572affdc17be10e556954
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140258.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  overflow: hidden;
+
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    span {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140302.vue b/.history/src/views/index/Index_20221011140302.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d863c4ab870e42e1eebe7733e4905193bd1ddee0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140302.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+ 
+
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    span {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140305.vue b/.history/src/views/index/Index_20221011140305.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c8faa05f3a88d3e814c8a9c7d188cfeba4b0b64
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140305.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+ 
+
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+     overflow: hidden;
+    span {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140319.vue b/.history/src/views/index/Index_20221011140319.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2393b19587702961f865a3c8a4ed981e5aff5c1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140319.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140328.vue b/.history/src/views/index/Index_20221011140328.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4c7c4d74f80b8893831a46f1386b3f5b6f0fc405
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140328.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o"  class=""/></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140330.vue b/.history/src/views/index/Index_20221011140330.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47a069ee3bf3fee68e761b6ccbf0df539fb08c97
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140330.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o"  class="lo"/></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140333.vue b/.history/src/views/index/Index_20221011140333.vue
new file mode 100644
index 0000000000000000000000000000000000000000..350f2d945868068f82f866d35eada99b959e967f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140333.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140345.vue b/.history/src/views/index/Index_20221011140345.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b674a715eee4c968e184b533b29931f7a1d515d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140345.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      display: block;
+      margin-top: 26px;
+      
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140347.vue b/.history/src/views/index/Index_20221011140347.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8c8df7397af08db72d26ad059b61c6041112ff03
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140347.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      display: block;
+      margin-top: 26px;
+      wid
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140349.vue b/.history/src/views/index/Index_20221011140349.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b674a715eee4c968e184b533b29931f7a1d515d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140349.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      display: block;
+      margin-top: 26px;
+      
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140355.vue b/.history/src/views/index/Index_20221011140355.vue
new file mode 100644
index 0000000000000000000000000000000000000000..275caa12ee74e2c9646c1c89f481a359da285463
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140355.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    /location {
+      display: block;
+      margin-top: 26px;
+      
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140358.vue b/.history/src/views/index/Index_20221011140358.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9b73194776cda58f008d4a2869daae6a0f60d345
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140358.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140406.vue b/.history/src/views/index/Index_20221011140406.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f7c6bd3f00d9201240d42d2e19dc52f8393906c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140406.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      wid
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140408.vue b/.history/src/views/index/Index_20221011140408.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb48b1286b5214c5b97a441c5a1c2292abc0a310
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140408.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      width: ;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140415.vue b/.history/src/views/index/Index_20221011140415.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cac85e2e7365b04eb31ab514ec21f10d9934aaf2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140415.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140426.vue b/.history/src/views/index/Index_20221011140426.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f06cf1b970067967eca4ca4e67852fcebfed3b6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140426.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      width: ;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140428.vue b/.history/src/views/index/Index_20221011140428.vue
new file mode 100644
index 0000000000000000000000000000000000000000..38ad2fd10142d99d2b30520f238f9202e6df76d3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140428.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      width: 40px;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140436.vue b/.history/src/views/index/Index_20221011140436.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2d037cdfd3aad6cd2a364a9f596cc7a399c76c9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140436.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      width: 40px!import;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140437.vue b/.history/src/views/index/Index_20221011140437.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f2df5fc69703d70f70469939bd5d49ecb3f3ef62
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140437.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      width: 40px!important;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140441.vue b/.history/src/views/index/Index_20221011140441.vue
new file mode 100644
index 0000000000000000000000000000000000000000..15fef3ca7fcf006a722eef0ba342bddf4331f928
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140441.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      width: 40px !important;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140508.vue b/.history/src/views/index/Index_20221011140508.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2840cb3bce339b625f6ea03c2f26f66c04671c98
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140508.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      size: ;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140510.vue b/.history/src/views/index/Index_20221011140510.vue
new file mode 100644
index 0000000000000000000000000000000000000000..682a8221c5b8221e1f667fb1b60006821b47bd8a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140510.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      size: 20px;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140529.vue b/.history/src/views/index/Index_20221011140529.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da83f05d1449f1cad5d7824b9f5f5f40278cf06d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140529.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      size: 20;
+      height: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140536.vue b/.history/src/views/index/Index_20221011140536.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cccac4dc8c7eb38e0f6ed8f084ed34f141c9058f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140536.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      size: 20;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140541.vue b/.history/src/views/index/Index_20221011140541.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3cd65a49de7ba422022325ff322e0c8715cca7f9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140541.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      size: ;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140543.vue b/.history/src/views/index/Index_20221011140543.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb6f797343b684050b7ccb20a323c25f597f4dc0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140543.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+      size: 40;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140634.vue b/.history/src/views/index/Index_20221011140634.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3ddc3e4f9ee23df3ec6f492cf65c9dc959fa7bc4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140634.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140637.vue b/.history/src/views/index/Index_20221011140637.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0c8772d949a0e5256a6927be946e3cba50daefb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140637.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size: 40; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140713.vue b/.history/src/views/index/Index_20221011140713.vue
new file mode 100644
index 0000000000000000000000000000000000000000..30c7468f6185ffcc7fa625ad8bfbb789c6ca9f4a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140713.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o"  size: 40; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140715.vue b/.history/src/views/index/Index_20221011140715.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ba41457564ae4d6478a00bf03c4c1c45931e8c92
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140715.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" size: 40; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140719.vue b/.history/src/views/index/Index_20221011140719.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51e4f352d4eda835cb1a95f30e16c8ac173fd844
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140719.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" size: "40"; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140721.vue b/.history/src/views/index/Index_20221011140721.vue
new file mode 100644
index 0000000000000000000000000000000000000000..51e4f352d4eda835cb1a95f30e16c8ac173fd844
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140721.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" size: "40"; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140723.vue b/.history/src/views/index/Index_20221011140723.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e5aa8dec1b3a3f0552f8ffe609425a64432d0769
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140723.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" size="40" ; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140726.vue b/.history/src/views/index/Index_20221011140726.vue
new file mode 100644
index 0000000000000000000000000000000000000000..26cc51f3efecd01cdd61ba4070d527d6089300bc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140726.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o"  size="40" ; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140727.vue b/.history/src/views/index/Index_20221011140727.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cfa6994cb59edafefb4650775d7632fba6b7720a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140727.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" size: 40; size="40" ; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140737.vue b/.history/src/views/index/Index_20221011140737.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f0c8772d949a0e5256a6927be946e3cba50daefb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140737.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size: 40; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140740.vue b/.history/src/views/index/Index_20221011140740.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d86fe72457f8332752a543212ec462737e7997d5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140740.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size= 40; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140742.vue b/.history/src/views/index/Index_20221011140742.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3bbf6c742db8d4275880ea206f0fe8442544d954
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140742.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size= “; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140744.vue b/.history/src/views/index/Index_20221011140744.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bba23c271de19428ac4facb2978da9014ebea29
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140744.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size= ""; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140745.vue b/.history/src/views/index/Index_20221011140745.vue
new file mode 100644
index 0000000000000000000000000000000000000000..14522adf8bc1d2b629acbbd68a5b96783a9f60a1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140745.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="40" ; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140749.vue b/.history/src/views/index/Index_20221011140749.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b8a3e007929f0a862f49578efff21be198bebeb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140749.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" ; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140803.vue b/.history/src/views/index/Index_20221011140803.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0707e1de6f5477c559d48a9ab207e1062959dce8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140803.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" ; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    // .location {
+    //   display: block;
+    //   margin-top: 26px;
+    // }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140839.vue b/.history/src/views/index/Index_20221011140839.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ee20a36b2d2a7411daaed599ab6d596aef9e1bb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140839.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="40" ; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    // .location {
+    //   display: block;
+    //   margin-top: 26px;
+    // }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140852.vue b/.history/src/views/index/Index_20221011140852.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ee20a36b2d2a7411daaed599ab6d596aef9e1bb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140852.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="40" ; /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    // .location {
+    //   display: block;
+    //   margin-top: 26px;
+    // }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140856.vue b/.history/src/views/index/Index_20221011140856.vue
new file mode 100644
index 0000000000000000000000000000000000000000..674dc735a6f0d51ef84cbbc02a65ea1e5b990b1b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140856.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="40 /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    // .location {
+    //   display: block;
+    //   margin-top: 26px;
+    // }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140859.vue b/.history/src/views/index/Index_20221011140859.vue
new file mode 100644
index 0000000000000000000000000000000000000000..897ce91f51bdeb35a44d20bcbbfc965488eee4c3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140859.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="40" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    // .location {
+    //   display: block;
+    //   margin-top: 26px;
+    // }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140908.vue b/.history/src/views/index/Index_20221011140908.vue
new file mode 100644
index 0000000000000000000000000000000000000000..915871e334103e5b4ed15fd558d613cda613402b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140908.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="40" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140925.vue b/.history/src/views/index/Index_20221011140925.vue
new file mode 100644
index 0000000000000000000000000000000000000000..45bcba323dfebd83d05320f7b16f4a3cba047b19
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140925.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140933.vue b/.history/src/views/index/Index_20221011140933.vue
new file mode 100644
index 0000000000000000000000000000000000000000..86b2aa7d6337fd487cd026ffbe04d27e9b2de54a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140933.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" /></span>
+      <span></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140937.vue b/.history/src/views/index/Index_20221011140937.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2aaee574d488d315dabf60cb37307b9fe9b4152b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140937.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" /></span>
+      <span>深圳市</span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011140948.vue b/.history/src/views/index/Index_20221011140948.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c0ee7d9beb1cba8b64313885267a3b49844ac56c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011140948.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" /></span>
+      <div>深圳市</div>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141002.vue b/.history/src/views/index/Index_20221011141002.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c94d19355933217193a67ca5520b47c2afc8614a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141002.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" /></span>
+      <div>深圳市</div>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141006.vue b/.history/src/views/index/Index_20221011141006.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c0ee7d9beb1cba8b64313885267a3b49844ac56c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141006.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" /></span>
+      <div>深圳市</div>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141009.vue b/.history/src/views/index/Index_20221011141009.vue
new file mode 100644
index 0000000000000000000000000000000000000000..45bcba323dfebd83d05320f7b16f4a3cba047b19
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141009.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" /></span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141012.vue b/.history/src/views/index/Index_20221011141012.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd7ae639d35f6ad842757b08b4c1fdeeac10a715
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141012.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span><van-icon name="location-o" class="location" size="20" />深圳市</span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141014.vue b/.history/src/views/index/Index_20221011141014.vue
new file mode 100644
index 0000000000000000000000000000000000000000..704a59e9824cfe3e6dd7b0a31e12098c25b63b7a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141014.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141043.vue b/.history/src/views/index/Index_20221011141043.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1d37d79e6272719e3d8f6b4c4339a56a44cd3134
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141043.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        span深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141045.vue b/.history/src/views/index/Index_20221011141045.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d59a54d4ed9b4e630c924f0f805904fc06be2c8c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141045.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        span 深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141048.vue b/.history/src/views/index/Index_20221011141048.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d59a54d4ed9b4e630c924f0f805904fc06be2c8c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141048.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        span 深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141049.vue b/.history/src/views/index/Index_20221011141049.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0ac50e126552e4afe2f917b746e3e3748715452
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141049.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span></span> 深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141053.vue b/.history/src/views/index/Index_20221011141053.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a946b6e152fada0974dcaf392267318e3c9205f1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141053.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span></span> 
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141054.vue b/.history/src/views/index/Index_20221011141054.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02c4c6c1c5391fcc0d6f9cf526d781df768229dc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141054.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      display: block;
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141107.vue b/.history/src/views/index/Index_20221011141107.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94af32f3b42b6d90c59b197e993382294fe36c1a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141107.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141116.vue b/.history/src/views/index/Index_20221011141116.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d96d89883241f9e2ed00ce152e7dace3d1548206
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141116.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      mar
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141121.vue b/.history/src/views/index/Index_20221011141121.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d96d89883241f9e2ed00ce152e7dace3d1548206
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141121.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      mar
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141125.vue b/.history/src/views/index/Index_20221011141125.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3bc6f03ea2b030015abf6823d9e74c544f700dfb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141125.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: ;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141127.vue b/.history/src/views/index/Index_20221011141127.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2198db61ba8a9abb5366541624b9c7732503bc37
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141127.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141139.vue b/.history/src/views/index/Index_20221011141139.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb3226c29e99faf083dab76c484c1d5017635c9c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141139.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      {
+      
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141141.vue b/.history/src/views/index/Index_20221011141141.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c0489de755f1800ae9a5e8429cdf978db8ebbe72
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141141.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141147.vue b/.history/src/views/index/Index_20221011141147.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7cad9d684782ddb23e30591773498a9a76a873a5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141147.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141148.vue b/.history/src/views/index/Index_20221011141148.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa324da7f1ca5e838cbe1c3b54eaae38cb88323f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141148.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141151.vue b/.history/src/views/index/Index_20221011141151.vue
new file mode 100644
index 0000000000000000000000000000000000000000..331e1f6fd9534a69302a50cdcdecc88df5126bce
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141151.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141152.vue b/.history/src/views/index/Index_20221011141152.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea7fda185b5c7e09619d35a7c5f1a2ed45d5ccd2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141152.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141155.vue b/.history/src/views/index/Index_20221011141155.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1cd6d7b1e240cf953c43dfe7cfa7e6fa2c5a5b16
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141155.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        co
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141158.vue b/.history/src/views/index/Index_20221011141158.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea7fda185b5c7e09619d35a7c5f1a2ed45d5ccd2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141158.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141159.vue b/.history/src/views/index/Index_20221011141159.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d63318e4042b0dbabf27abd9848f3fdca34bd369
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141159.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        fon
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141202.vue b/.history/src/views/index/Index_20221011141202.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54b908894c00c24811e5e64eafe1bb2a75551281
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141202.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        font-size: ;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141203.vue b/.history/src/views/index/Index_20221011141203.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9acf131dc3773b27ff799405884509a1adf81d14
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141203.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        font-size: 20;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141208.vue b/.history/src/views/index/Index_20221011141208.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54b908894c00c24811e5e64eafe1bb2a75551281
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141208.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        font-size: ;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141209.vue b/.history/src/views/index/Index_20221011141209.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4cde00e2ecfcaa7b50deb0d4effe674cde401087
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141209.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        font-size: 40;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141213.vue b/.history/src/views/index/Index_20221011141213.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fc6aea66e3860ac17c0e6e7b8970295834a080d0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141213.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span>深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        font-size: 40px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141224.vue b/.history/src/views/index/Index_20221011141224.vue
new file mode 100644
index 0000000000000000000000000000000000000000..099a1e62437f0e909e24ebcb9f97d41a14d37fc6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141224.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span class="">深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        font-size: 40px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141228.vue b/.history/src/views/index/Index_20221011141228.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6b787728a199be164ab5f438f1925f2d0a20301
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141228.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span class="text">深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      span{
+        font-size: 40px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141234.vue b/.history/src/views/index/Index_20221011141234.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eb8b3e146e7deb39fdac7bbb2890b2787f309396
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141234.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span class="text">深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      text{
+        font-size: 40px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141235.vue b/.history/src/views/index/Index_20221011141235.vue
new file mode 100644
index 0000000000000000000000000000000000000000..84ce01de9e5895050afb11ff67aa650db76572b9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141235.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span class="text">深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      .text {
+        font-size: 40px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141340.vue b/.history/src/views/index/Index_20221011141340.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e468d2803c2553388ed1abd5b13ecb8620680bb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141340.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span class="text">深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      .text {
+        font-size: 40px;
+        colo
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141342.vue b/.history/src/views/index/Index_20221011141342.vue
new file mode 100644
index 0000000000000000000000000000000000000000..09183de44977a9792c4ced061f99067de5adb648
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141342.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span class="text">深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      .text {
+        font-size: 40px;
+        color: ;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141343.vue b/.history/src/views/index/Index_20221011141343.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e1165b9b82a3fccd1a1e4cd0e7fac168c7abfa84
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141343.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span class="text">深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+      .text {
+        font-size: 40px;
+        color: red;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141352.vue b/.history/src/views/index/Index_20221011141352.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e2cf7f5ea88cfbacd99a5e8191a0100830c27b1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141352.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        <span class="text">深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141401.vue b/.history/src/views/index/Index_20221011141401.vue
new file mode 100644
index 0000000000000000000000000000000000000000..10e263dd14085913990ff31c122e66369570cdf0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141401.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+深圳市</span>
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141403.vue b/.history/src/views/index/Index_20221011141403.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0de709eab465c97d78349dd37216160e2c67e7c3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141403.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    .location {
+      margin-top: 26px;
+      margin-right: 20px;
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141424.vue b/.history/src/views/index/Index_20221011141424.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6eeb4780d40c3a068a2171218181f5643dabd0c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141424.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141429.vue b/.history/src/views/index/Index_20221011141429.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc1b0c76b70da440e7a68cdf4df703c901c5b15f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141429.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141432.vue b/.history/src/views/index/Index_20221011141432.vue
new file mode 100644
index 0000000000000000000000000000000000000000..abfd18ff4a48014dae1d396b532949ec203a3543
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141432.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141439.vue b/.history/src/views/index/Index_20221011141439.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe784863854f9fb9ec71edcb1e65e2797f62a546
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141439.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      c
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141440.vue b/.history/src/views/index/Index_20221011141440.vue
new file mode 100644
index 0000000000000000000000000000000000000000..79e85aa3643752c18427e72400a4f848dea6e871
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141440.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      col
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141443.vue b/.history/src/views/index/Index_20221011141443.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50c6d084563c31d81f91b703f63bfc673e61d6ee
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141443.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      color: red;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141449.vue b/.history/src/views/index/Index_20221011141449.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc1b0c76b70da440e7a68cdf4df703c901c5b15f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141449.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141451.vue b/.history/src/views/index/Index_20221011141451.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f7fe4316bca7d2e6822770e681747ffcfeca71f7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141451.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141455.vue b/.history/src/views/index/Index_20221011141455.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61c6f75915de8505df5cc92494fa07d00cde890a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141455.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 20px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141500.vue b/.history/src/views/index/Index_20221011141500.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a905095aa96c6199997c27f6f58b3e73655cfedb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141500.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141520.vue b/.history/src/views/index/Index_20221011141520.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a318cb3d1de74a70fc01746a03cdf4c08332674b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141520.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+       margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141523.vue b/.history/src/views/index/Index_20221011141523.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f22ac58d6fd7723f947f4d9c3c7e83e965aea4db
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141523.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141604.vue b/.history/src/views/index/Index_20221011141604.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6a569d262addf90ede5d7b8576e151c694d48d62
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141604.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141626.vue b/.history/src/views/index/Index_20221011141626.vue
new file mode 100644
index 0000000000000000000000000000000000000000..81cbb0cb1e97b19310cf29d67399c7eb3e85f26c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141626.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141634.vue b/.history/src/views/index/Index_20221011141634.vue
new file mode 100644
index 0000000000000000000000000000000000000000..980815370051d7c53cd888e34613b2e0db6ecae2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141634.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141744.vue b/.history/src/views/index/Index_20221011141744.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a2b1de1001f7214cf81949d9b6825fd61454276
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141744.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item><img src="" alt=""></van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141747.vue b/.history/src/views/index/Index_20221011141747.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4756c0b9221b51d99d1273596362d30badd31d80
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141747.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item><img src="@/" alt=""></van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141749.vue b/.history/src/views/index/Index_20221011141749.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f4dcdc2b6056bc3287d93276c5c50bdabfc011b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141749.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item><img src="@/src" alt=""></van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141754.vue b/.history/src/views/index/Index_20221011141754.vue
new file mode 100644
index 0000000000000000000000000000000000000000..35915c98eec1c3108c3d08fc20560c8ff2c19fca
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141754.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item><img src="@/assets" alt=""></van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141757.vue b/.history/src/views/index/Index_20221011141757.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24d4945488868f67feb1c6eb2ece47f2cd71cacd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141757.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item><img src="@/assets/imgs" alt=""></van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141801.vue b/.history/src/views/index/Index_20221011141801.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a8d12786cef11a67bb7d96af789a4ce45a5164cb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141801.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item><img src="@/assets/imgs/11.png" alt=""></van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141802.vue b/.history/src/views/index/Index_20221011141802.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d9d402cefa22cc2eb01d8af58aedf76008a4d085
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141802.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="@/assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141823.vue b/.history/src/views/index/Index_20221011141823.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19f711ab51f51bf7ff17c264396de2089bb0c030
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141823.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="..//assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141825.vue b/.history/src/views/index/Index_20221011141825.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6d4b8ef0f39355b5c8633e5f0a46bb97b16b5c91
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141825.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../..//assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141838.vue b/.history/src/views/index/Index_20221011141838.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ddded5bdd6ee05819571458cab0a4d7ad38bda7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141838.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    // background-color: red;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141859.vue b/.history/src/views/index/Index_20221011141859.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00d5196da95aa5fec3a18c00234a2ab5be9e6297
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141859.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141906.vue b/.history/src/views/index/Index_20221011141906.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e003d18a94e746589edfca5872b75988ecfb200d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141906.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141912.vue b/.history/src/views/index/Index_20221011141912.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0b19083d5486f0fec96616d594df0caadb937fd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141912.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img {
+        width: 700px;
+        height: 260px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141921.vue b/.history/src/views/index/Index_20221011141921.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e8a0b76397bb9107976ed3b7964efcd572c0224
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141921.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      // background-color: #39a9ed;
+      img {
+        width: 700px;
+        height: 260px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141941.vue b/.history/src/views/index/Index_20221011141941.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4879987f7212fead5047015049da08c265ef397a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141941.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      // background-color: #39a9ed;
+      img {
+        width: 100%;
+        height: 260px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141949.vue b/.history/src/views/index/Index_20221011141949.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6aba42d1cf9aaafa58efa892e6e5a74c363b673
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141949.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img {
+        width: 100%;
+        height: 260px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011141958.vue b/.history/src/views/index/Index_20221011141958.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2603744ba9aedd68414997fcd3f3693403ba8751
--- /dev/null
+++ b/.history/src/views/index/Index_20221011141958.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142013.vue b/.history/src/views/index/Index_20221011142013.vue
new file mode 100644
index 0000000000000000000000000000000000000000..efcb3eb730ec211a7e07f9d9c89cf6aa817ddb11
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142013.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142106.vue b/.history/src/views/index/Index_20221011142106.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6a6a8cf311bb52cc28c40e9e5b274cd1b37ae56a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142106.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img {
+        width: 100%;
+        height:;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142109.vue b/.history/src/views/index/Index_20221011142109.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c544812f3155108fd999321da0b96232140389d8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142109.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img {
+        width: 100%;
+        height:260px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142111.vue b/.history/src/views/index/Index_20221011142111.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6aba42d1cf9aaafa58efa892e6e5a74c363b673
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142111.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img {
+        width: 100%;
+        height: 260px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142120.vue b/.history/src/views/index/Index_20221011142120.vue
new file mode 100644
index 0000000000000000000000000000000000000000..814d8631a3f0c85a4628cbaf87f06e76a802c674
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142120.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142123.vue b/.history/src/views/index/Index_20221011142123.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6aba42d1cf9aaafa58efa892e6e5a74c363b673
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142123.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img {
+        width: 100%;
+        height: 260px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142132.vue b/.history/src/views/index/Index_20221011142132.vue
new file mode 100644
index 0000000000000000000000000000000000000000..60b1d19525cbfdb262a5a33756a7baa29e3aa84b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142132.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142133.vue b/.history/src/views/index/Index_20221011142133.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00eef8272fdad9b17a089311d9bb61c81ecdf4cf
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142133.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142145.vue b/.history/src/views/index/Index_20221011142145.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a8fd7f08e73455679993372562338c14266defb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142145.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    backdrop-filter: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142149.vue b/.history/src/views/index/Index_20221011142149.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f2b5280ddf94529f8d6e057bd40562262e9d5c8a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142149.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    back;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142152.vue b/.history/src/views/index/Index_20221011142152.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85462375b09dfa432298f71665dd57b38f3e30b2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142152.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142205.vue b/.history/src/views/index/Index_20221011142205.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e614c74629570a2055bc00022a58af9426482d81
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142205.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142207.vue b/.history/src/views/index/Index_20221011142207.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0169ef492a4e444d518c29fed27b0a939cceae35
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142207.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img{
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142210.vue b/.history/src/views/index/Index_20221011142210.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90d0ffaed09076446e4e3753d05b83120f242833
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142210.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img{
+      height: ;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142213.vue b/.history/src/views/index/Index_20221011142213.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ad97597d8a0a1cc6dd4539e13f8828b46bffe194
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142213.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img{
+      height: 260px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142221.vue b/.history/src/views/index/Index_20221011142221.vue
new file mode 100644
index 0000000000000000000000000000000000000000..769f76a3e709fc555be796f1af8a32e3a3261a85
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142221.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img{
+      height: 260px;
+      wid
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142224.vue b/.history/src/views/index/Index_20221011142224.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a66f246a88c322a760a1e968bad5de98853d233
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142224.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img{
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142242.vue b/.history/src/views/index/Index_20221011142242.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2dc97a46d6544de8748c4a9274f431e5f7db4232
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142242.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item><img src="../.././assets/imgs/11.png" alt="" /></van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img{
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142244.vue b/.history/src/views/index/Index_20221011142244.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b1be804d0bc51d179d4a1f4eecab56dcf48e42fc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142244.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item><img src="../.././assets/imgs/11.png" alt="" /></van-swipe-item>
+        <van-swipe-item><img src="../.././assets/imgs/11.png" alt="" /></van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img{
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142247.vue b/.history/src/views/index/Index_20221011142247.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56938d5550b543f67e41cd52ba2baa1b25165df3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142247.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142251.vue b/.history/src/views/index/Index_20221011142251.vue
new file mode 100644
index 0000000000000000000000000000000000000000..543b759c5c389bd4c99e38cfa4fce68f3ed39ede
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142251.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142253.vue b/.history/src/views/index/Index_20221011142253.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f57dd7e418bb8782dcf198667aa5ff4974758a06
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142253.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142256.vue b/.history/src/views/index/Index_20221011142256.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1fd236977f125c582159d90a63e8c5bba973224a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142256.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142306.vue b/.history/src/views/index/Index_20221011142306.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e3b135b0e9644133ff004859084dbe23c70fe43
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142306.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    // margin-left: 24px;
+    // background-color: red;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142307.vue b/.history/src/views/index/Index_20221011142307.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1fd236977f125c582159d90a63e8c5bba973224a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142307.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    background-color: red;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142309.vue b/.history/src/views/index/Index_20221011142309.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02571b23719d266be7531a18d1eb041ef9567696
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142309.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    // background-color: red;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142351.vue b/.history/src/views/index/Index_20221011142351.vue
new file mode 100644
index 0000000000000000000000000000000000000000..279bfac525fca0367312af993cf1473480756027
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142351.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142401.vue b/.history/src/views/index/Index_20221011142401.vue
new file mode 100644
index 0000000000000000000000000000000000000000..960f8ce8ec68d87d24ef2b9af255ad158dc98419
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142401.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142403.vue b/.history/src/views/index/Index_20221011142403.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a3920ac86917bc5fa945193491533a61be563446
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142403.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    div
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142404.vue b/.history/src/views/index/Index_20221011142404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..31cd713e1dbca8ba032c6017d1038b97197c9590
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142404.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    div.
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142407.vue b/.history/src/views/index/Index_20221011142407.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d93e7e69ad4da77a5e4de26820421a2d1bacb3cf
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142407.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142408.vue b/.history/src/views/index/Index_20221011142408.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17d805b73ecfcde6a4c6ea91fcd481977ac2696a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142408.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142416.vue b/.history/src/views/index/Index_20221011142416.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9eb0e5a5a3edaea06cd17078fb6cfadc12d7468f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142416.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav{
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142417.vue b/.history/src/views/index/Index_20221011142417.vue
new file mode 100644
index 0000000000000000000000000000000000000000..79bb94e88f41a5ba54f560b3671f9d9f8f5c4286
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142417.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav{
+    h
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142418.vue b/.history/src/views/index/Index_20221011142418.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9eb0e5a5a3edaea06cd17078fb6cfadc12d7468f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142418.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav{
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142420.vue b/.history/src/views/index/Index_20221011142420.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e090990a6c2bd6c4a504cd4104a9b98d6748e13e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142420.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav{
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142425.vue b/.history/src/views/index/Index_20221011142425.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9af6c41c54e40729591cbd2167977e33d485973a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142425.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav{
+    mar
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142427.vue b/.history/src/views/index/Index_20221011142427.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e046a447be9beb82609b4cf1738e3605745154c5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142427.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav{
+    margin: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142431.vue b/.history/src/views/index/Index_20221011142431.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9af6c41c54e40729591cbd2167977e33d485973a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142431.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav{
+    mar
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142435.vue b/.history/src/views/index/Index_20221011142435.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88030ee1f8c21203689d960d7b243f11c5e10bb7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142435.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav{
+    margin-top: 34px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142557.vue b/.history/src/views/index/Index_20221011142557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2fb69437269aab4c7f8536ff3059d2db78ea0154
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142557.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142654.vue b/.history/src/views/index/Index_20221011142654.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f91f38c7f6a5e36291f7f2d8203634bd49331c3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142654.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142655.vue b/.history/src/views/index/Index_20221011142655.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f133f767dd8c9ad1d41ed048b003998ffbc5427c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142655.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    wid
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142700.vue b/.history/src/views/index/Index_20221011142700.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea1dbac0b9e6730c28ef9e573c137e00d5a6975a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142700.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142712.vue b/.history/src/views/index/Index_20221011142712.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3627e57a5e4fab0679c9e33e2e77a5d524171c3c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142712.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142726.vue b/.history/src/views/index/Index_20221011142726.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6191c7b7a776e83c2412f65f77aa5c4436a64d8c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142726.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142742.vue b/.history/src/views/index/Index_20221011142742.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53b72fc5bab48cc5868274e93ecbee5f3dfb69ac
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142742.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    img{
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142746.vue b/.history/src/views/index/Index_20221011142746.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1119b81765a4c1e562299723f778117451c77b74
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142746.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    img {
+      width: 700px;
+      height: 358px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142756.vue b/.history/src/views/index/Index_20221011142756.vue
new file mode 100644
index 0000000000000000000000000000000000000000..783903f2269bb45fcf68cf8c72c3359fea02771b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142756.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    img {
+      width: 15;
+      height: 358px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142800.vue b/.history/src/views/index/Index_20221011142800.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75f9608cd0bec06f2183b6abb033a52019df802e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142800.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    img {
+      width: 100%;
+      height: 358px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142802.vue b/.history/src/views/index/Index_20221011142802.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75f9608cd0bec06f2183b6abb033a52019df802e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142802.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    img {
+      width: 100%;
+      height: 358px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142810.vue b/.history/src/views/index/Index_20221011142810.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4617feaf022b587711a51f2ee36a7d14525d75ca
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142810.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142814.vue b/.history/src/views/index/Index_20221011142814.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9d473209ea237dfe18d01f134c3be42bf892f26
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142814.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142821.vue b/.history/src/views/index/Index_20221011142821.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a1577a38da45bfdaaa7b146befe8b9a7b1ecc8b2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142821.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142829.vue b/.history/src/views/index/Index_20221011142829.vue
new file mode 100644
index 0000000000000000000000000000000000000000..93ced6d0ed46b59ed5a3f64e8045304cfea73825
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142829.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    back
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142836.vue b/.history/src/views/index/Index_20221011142836.vue
new file mode 100644
index 0000000000000000000000000000000000000000..93ced6d0ed46b59ed5a3f64e8045304cfea73825
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142836.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    back
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142837.vue b/.history/src/views/index/Index_20221011142837.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5620508dd1ca83b0db3d58215ef85821f6b87b8b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142837.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    background-color: ;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142839.vue b/.history/src/views/index/Index_20221011142839.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6a57b5546a1be696b403c0acb047c14a3c20ff4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142839.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142910.vue b/.history/src/views/index/Index_20221011142910.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9701a9f779273ca90ec6a371fcf460abe9d18f73
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142910.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142926.vue b/.history/src/views/index/Index_20221011142926.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc473c9ca1c6a940730bd0c4f3208fb34d51c012
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142926.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <!-- <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div> -->
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142930.vue b/.history/src/views/index/Index_20221011142930.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9701a9f779273ca90ec6a371fcf460abe9d18f73
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142930.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142940.vue b/.history/src/views/index/Index_20221011142940.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3316cc797259bd59277304284f799da42c299a4e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142940.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142949.vue b/.history/src/views/index/Index_20221011142949.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6a57b5546a1be696b403c0acb047c14a3c20ff4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142949.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011142951.vue b/.history/src/views/index/Index_20221011142951.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9fc126a2872cd097721b3b8706facf2b83092bc8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011142951.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 34px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143017.vue b/.history/src/views/index/Index_20221011143017.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eb73d2542e204dc6e0886e1dc3c587d0810e8aa5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143017.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143034.vue b/.history/src/views/index/Index_20221011143034.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c96c04d87ef0587cfaa342a8a550cc4e08439676
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143034.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    mar
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143036.vue b/.history/src/views/index/Index_20221011143036.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0fe598dde1db72235d52ace36477ce25db97693e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143036.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143039.vue b/.history/src/views/index/Index_20221011143039.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a7251007643a92bba02e9477bbc36be388fc3be7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143039.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143044.vue b/.history/src/views/index/Index_20221011143044.vue
new file mode 100644
index 0000000000000000000000000000000000000000..584fbb8e8b4ffb503a15bb70ab48d3c08d4378e8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143044.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:0 auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143056.vue b/.history/src/views/index/Index_20221011143056.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17635142af75115d76721594837d1a65ed8bdee9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143056.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143127.vue b/.history/src/views/index/Index_20221011143127.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f4e542c05282f3d836df65cebd3c3d3d0d55668d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143127.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    po
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143128.vue b/.history/src/views/index/Index_20221011143128.vue
new file mode 100644
index 0000000000000000000000000000000000000000..476491071b85fc86bd7965f753bbb0ed100e002d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143128.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    position: relative;
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143131.vue b/.history/src/views/index/Index_20221011143131.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b768f21e86e42daf5e5fdb0edc29f1f054baff36
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143131.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    position: absolute;
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143135.vue b/.history/src/views/index/Index_20221011143135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d7a93304f5eb42289e7af7020e0bd771cb81e2eb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143135.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    position: absolute;
+   top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143136.vue b/.history/src/views/index/Index_20221011143136.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a8b19bdc70817e7faae2ccfd8898f75bfd97824d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143136.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    position: absolute;
+    top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143142.vue b/.history/src/views/index/Index_20221011143142.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17635142af75115d76721594837d1a65ed8bdee9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143142.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143146.vue b/.history/src/views/index/Index_20221011143146.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0fe598dde1db72235d52ace36477ce25db97693e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143146.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143149.vue b/.history/src/views/index/Index_20221011143149.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1e0dd1c73a58ab8e54a6cbbb7621547105e7c82b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143149.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    pad: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143150.vue b/.history/src/views/index/Index_20221011143150.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8d388a4774e469b2d64d44610d700b6cf057363
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143150.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    padding: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143157.vue b/.history/src/views/index/Index_20221011143157.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e55ceac37d15a32f6319091804ce03afaf6a5f21
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143157.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    padding:0 24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143205.vue b/.history/src/views/index/Index_20221011143205.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b87345ff15137afb2702f578e8cb90e503430cb7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143205.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    mar:0 24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143206.vue b/.history/src/views/index/Index_20221011143206.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c505250c4fdca9b9a4296b5c2753f79c5e62a67c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143206.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:0 24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143216.vue b/.history/src/views/index/Index_20221011143216.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fda4a9d987767276e60c080a7cd43acfec055a69
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143216.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143220.vue b/.history/src/views/index/Index_20221011143220.vue
new file mode 100644
index 0000000000000000000000000000000000000000..07e388e82375d8642db75ab26a4f0b390c3fe3c7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143220.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:124px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143225.vue b/.history/src/views/index/Index_20221011143225.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1153eb46111cd548c914045a904225a019078f8a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143225.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:1424px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143227.vue b/.history/src/views/index/Index_20221011143227.vue
new file mode 100644
index 0000000000000000000000000000000000000000..400563fbbf0369cb0bdbf98d657450f084e82d1a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143227.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:149px24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143228.vue b/.history/src/views/index/Index_20221011143228.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66200f318b881ffd2838b34d213c0e1680145030
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143228.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:149px 24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143234.vue b/.history/src/views/index/Index_20221011143234.vue
new file mode 100644
index 0000000000000000000000000000000000000000..453446846ab5dabd5b62ce7cccc0ad9188fb2fe1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143234.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    // margin-top: 149px;
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:149px 24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143237.vue b/.history/src/views/index/Index_20221011143237.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4a19f2e0ce18f1eeca81159c2227e836853816e8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143237.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:149px 24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143245.vue b/.history/src/views/index/Index_20221011143245.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e33a524c305a47db16b6adb20e24eba5d600d273
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143245.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:149px 24px 0   ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143247.vue b/.history/src/views/index/Index_20221011143247.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a10b805d93066153966e0a6444357d11162586f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143247.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin:149px 24px 0  24px ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143248.vue b/.history/src/views/index/Index_20221011143248.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6e256ba313f837ab4edc109d635c56c112beb60
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143248.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143302.vue b/.history/src/views/index/Index_20221011143302.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6c7c4a6e782f68c63d7b02501365fb5c79057893
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143302.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143312.vue b/.history/src/views/index/Index_20221011143312.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b6457eb8bb8f09a5f5a639073947eb167251d81e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143312.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+1
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143313.vue b/.history/src/views/index/Index_20221011143313.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a42064047352bcb417eb5a44c33365c46806e2ed
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143313.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143316.vue b/.history/src/views/index/Index_20221011143316.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ed72a48baf82877e7f874fbcab77801bfd5be7c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143316.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143318.vue b/.history/src/views/index/Index_20221011143318.vue
new file mode 100644
index 0000000000000000000000000000000000000000..899e2b630d08afdca20e67e766a1acf3e8228b69
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143318.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>
+        </van-swipe-item>
+        <van-swipe-item>
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143320.vue b/.history/src/views/index/Index_20221011143320.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c95745c8b6aac0c88715af9bf45671d5206468ec
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143320.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>
+        </van-swipe-item>
+        <van-swipe-item>
+        </van-swipe-item>
+        <van-swipe-item>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143324.vue b/.history/src/views/index/Index_20221011143324.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7dbdd47af120af6c41cc285d362fd4f89ba082e0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143324.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>
+        </van-swipe-item>
+
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143327.vue b/.history/src/views/index/Index_20221011143327.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5a314f6324fc119cca6f8f72b4df53df2723e0a4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143327.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2
+        </van-swipe-item>
+
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143329.vue b/.history/src/views/index/Index_20221011143329.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4daa76f08d7d9cecc10980dadb99384035f895d1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143329.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143358.vue b/.history/src/views/index/Index_20221011143358.vue
new file mode 100644
index 0000000000000000000000000000000000000000..64760ddd290bc489f878036cfa5ec4aead54c9db
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143358.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143402.vue b/.history/src/views/index/Index_20221011143402.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4daa76f08d7d9cecc10980dadb99384035f895d1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143402.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143404.vue b/.history/src/views/index/Index_20221011143404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8a6a152beb8a800f607f0799633666011021816
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143404.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+      .my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 20px;
+    line-height: 150px;
+    text-align: center;
+    background-color: #39a9ed;
+  }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143406.vue b/.history/src/views/index/Index_20221011143406.vue
new file mode 100644
index 0000000000000000000000000000000000000000..107aa8f7f694afb787d25e6aa4863357673093ab
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143406.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143443.vue b/.history/src/views/index/Index_20221011143443.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83f784729c6a47e0a53440cb2f01a3f87310ea3d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143443.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      // line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143448.vue b/.history/src/views/index/Index_20221011143448.vue
new file mode 100644
index 0000000000000000000000000000000000000000..107aa8f7f694afb787d25e6aa4863357673093ab
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143448.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143454.vue b/.history/src/views/index/Index_20221011143454.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab6ea89f3d2335f2ee96c0ab5c9a6ba177b357f3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143454.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 358px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143459.vue b/.history/src/views/index/Index_20221011143459.vue
new file mode 100644
index 0000000000000000000000000000000000000000..107aa8f7f694afb787d25e6aa4863357673093ab
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143459.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143550.vue b/.history/src/views/index/Index_20221011143550.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f8472f9f80530499403d8a5557d1f71ed6ed567
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143550.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe .van-swipe-item {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143620.vue b/.history/src/views/index/Index_20221011143620.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aa705c72adfa73c06b0fd793b8e80283e72c3df3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143620.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe  {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143629.vue b/.history/src/views/index/Index_20221011143629.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f3445377ac5460356bcc5656f43dc6c5a395000d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143629.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143637.vue b/.history/src/views/index/Index_20221011143637.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9b0062bc92d43e15e7eb478e18e6ac88f472981d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143637.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe"  indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143640.vue b/.history/src/views/index/Index_20221011143640.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83d00c3ad6a3ae83f63bde9357b17065e1a97265
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143640.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143659.vue b/.history/src/views/index/Index_20221011143659.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f1f634d14978a8eb0414dd174db850945284835d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143659.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143703.vue b/.history/src/views/index/Index_20221011143703.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3639a8f5f185f6ccf60c9cea35deb31c4c845b30
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143703.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143721.vue b/.history/src/views/index/Index_20221011143721.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f35bec57a90f6ceb4451365ebbd624b307c8e12
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143721.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143743.vue b/.history/src/views/index/Index_20221011143743.vue
new file mode 100644
index 0000000000000000000000000000000000000000..511996fdc221cc5470410f1c921cba065d70e1fc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143743.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/11.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143746.vue b/.history/src/views/index/Index_20221011143746.vue
new file mode 100644
index 0000000000000000000000000000000000000000..633e4429ff86068596d5c3d10984d70fe70f167c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143746.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143801.vue b/.history/src/views/index/Index_20221011143801.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dae0d2de14279acf90ea6d5884cd7e524b0d9f70
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143801.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143802.vue b/.history/src/views/index/Index_20221011143802.vue
new file mode 100644
index 0000000000000000000000000000000000000000..342ffe6c8efb9d02ebea6b88e2b349d0513b5408
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143802.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143807.vue b/.history/src/views/index/Index_20221011143807.vue
new file mode 100644
index 0000000000000000000000000000000000000000..125f8b2ea771f508cba5bb96816204a418ae0195
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143807.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143813.vue b/.history/src/views/index/Index_20221011143813.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db09e7c1b20e40e21c1e7f4747282508d3b5c3fd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143813.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143816.vue b/.history/src/views/index/Index_20221011143816.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a34cd32d0cc11094cf326bc4d4f6f1895506c288
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143816.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143855.vue b/.history/src/views/index/Index_20221011143855.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f55a5b15094b6a3fe252412ece3fb7d7ee5a9ba2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143855.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        wid
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143857.vue b/.history/src/views/index/Index_20221011143857.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33f8e11f561a3f9061a7f8a6f4c2806b38936444
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143857.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        width: ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143859.vue b/.history/src/views/index/Index_20221011143859.vue
new file mode 100644
index 0000000000000000000000000000000000000000..006a61020dd3747782bb2323359bbcd1bb136117
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143859.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        width: 90pxx;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143903.vue b/.history/src/views/index/Index_20221011143903.vue
new file mode 100644
index 0000000000000000000000000000000000000000..910f67a0ba38a260e11a97933b88e7166c7f86b3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143903.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        width: 90px;
+        height: ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143905.vue b/.history/src/views/index/Index_20221011143905.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d032f5fe59fa35109c4c5ef39b15588767e31de6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143905.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        width: 90px;
+        height: 90px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143930.vue b/.history/src/views/index/Index_20221011143930.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bba87fbd5f7068cecfccbb69c75ccbf9be361042
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143930.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        width: 90px;
+        height: 90px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143933.vue b/.history/src/views/index/Index_20221011143933.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e5c7ddce1ab4bfa543b7b30605d9febf3df74d6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143933.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      img{
+        width: 90px;
+        height: 90px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143943.vue b/.history/src/views/index/Index_20221011143943.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c1632823f2173d72fb0a493e547222fd0bc7e39
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143943.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul{
+        
+      }
+      img{
+        width: 90px;
+        height: 90px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143946.vue b/.history/src/views/index/Index_20221011143946.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db3b484b58d02dabcd896e90d93c494fa82679bc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143946.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul{
+        dis
+      }
+      img{
+        width: 90px;
+        height: 90px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143947.vue b/.history/src/views/index/Index_20221011143947.vue
new file mode 100644
index 0000000000000000000000000000000000000000..852b781c34330f0ef923cb55b8f679310c7a232a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143947.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul{
+        display: ;
+      }
+      img{
+        width: 90px;
+        height: 90px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143949.vue b/.history/src/views/index/Index_20221011143949.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd4b88523baaeed5372efe3cce56f23e297ebe0b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143949.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul{
+        display: flex;
+      }
+      img{
+        width: 90px;
+        height: 90px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143952.vue b/.history/src/views/index/Index_20221011143952.vue
new file mode 100644
index 0000000000000000000000000000000000000000..744065da9b5571aead04f991253e2a6b58495e26
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143952.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul{
+        display: flex;
+      }
+    
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011143954.vue b/.history/src/views/index/Index_20221011143954.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f028497fdc8eaab37cbf3e1801aa3d1eeb581f61
--- /dev/null
+++ b/.history/src/views/index/Index_20221011143954.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul{
+        display: flex;
+          img{
+        width: 90px;
+        height: 90px;
+      }
+      }
+    
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144000.vue b/.history/src/views/index/Index_20221011144000.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3180656d2b548d878cc1c1a0089f469469c01f1d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144000.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        img {
+          width: 90px;
+          height: 90px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144005.vue b/.history/src/views/index/Index_20221011144005.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a24ec5c9cc73664252fa83931bf63187a07f70cf
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144005.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        li
+        img {
+          width: 90px;
+          height: 90px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144007.vue b/.history/src/views/index/Index_20221011144007.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd693de78fbc2cfe57c400b9277eb05adb30fbf1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144007.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        li{
+          
+        }
+        img {
+          width: 90px;
+          height: 90px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144010.vue b/.history/src/views/index/Index_20221011144010.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a8fc8872c8fa625d6426e7e33388b92865cd0ff0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144010.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        li{
+
+        }
+      
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144011.vue b/.history/src/views/index/Index_20221011144011.vue
new file mode 100644
index 0000000000000000000000000000000000000000..220f15d06177497f59b9c74b3cdb9ad0dadc94ba
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144011.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144015.vue b/.history/src/views/index/Index_20221011144015.vue
new file mode 100644
index 0000000000000000000000000000000000000000..34f777138be3d4acd8c03219413f49eaf7bb6811
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144015.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        li {
+          mar
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144017.vue b/.history/src/views/index/Index_20221011144017.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5003bf3e1fbb55e531114c6e0d6a4d8fb7cca254
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144017.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        li {
+          margin-top: ;
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144030.vue b/.history/src/views/index/Index_20221011144030.vue
new file mode 100644
index 0000000000000000000000000000000000000000..220f15d06177497f59b9c74b3cdb9ad0dadc94ba
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144030.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144041.vue b/.history/src/views/index/Index_20221011144041.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe9eb2f5584d160ac8888f8041b344f8251a28c0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144041.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        jus
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144042.vue b/.history/src/views/index/Index_20221011144042.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b71f79df53023aa837bccf92d3f961058d257c3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144042.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: ;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144044.vue b/.history/src/views/index/Index_20221011144044.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe5519abd571a4943bdf2dd83f850ee992a95f5a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144044.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: spa;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144045.vue b/.history/src/views/index/Index_20221011144045.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f460e7fbdab4372f25921bb716f0f9023f80837f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144045.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144134.vue b/.history/src/views/index/Index_20221011144134.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4193f0ca1613191a9196de00cc58a30b4b275e77
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144134.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" />
+            span</li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144135.vue b/.history/src/views/index/Index_20221011144135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..869f00f82697003e895227d49f2f4695ffb09b17
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144135.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" />
+            span
+            </li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144143.vue b/.history/src/views/index/Index_20221011144143.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4a0b0ea5d0a9075c3cbbbe2916c04723e716f254
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144143.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" />
+            <span></span>
+            </li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144146.vue b/.history/src/views/index/Index_20221011144146.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2ae799d5598fc9a1e4c5657db1d12cc44032951b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144146.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" />
+            <span>jiating</span>
+            </li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144150.vue b/.history/src/views/index/Index_20221011144150.vue
new file mode 100644
index 0000000000000000000000000000000000000000..34004b65bd559f683abbcffc47362265bb2d12c5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144150.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" />
+            <span>家庭保洁</span>
+            </li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144157.vue b/.history/src/views/index/Index_20221011144157.vue
new file mode 100644
index 0000000000000000000000000000000000000000..287df4885cd55084c48fccd0cbe3b272507fc266
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144157.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" />
+            <span>家庭保洁</span>
+            </li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /><span>家庭保洁</span></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144158.vue b/.history/src/views/index/Index_20221011144158.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43d45605fbf02af3b6cb3de6c92c50ee51e64a09
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144158.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li><img src="../.././assets/imgs/1.png" alt="" />
+            <span>家庭保洁</span>
+            </li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /><span>家庭保洁</span></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /><span>家庭保洁</span></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+            <li><img src="../.././assets/imgs/1.png" alt="" /></li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144200.vue b/.history/src/views/index/Index_20221011144200.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9628b052f175cfd1552950c7d13eb4a727338e0d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144200.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144248.vue b/.history/src/views/index/Index_20221011144248.vue
new file mode 100644
index 0000000000000000000000000000000000000000..231a9af88eb29e5edbc6252ab88d85c5a140a5a8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144248.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144250.vue b/.history/src/views/index/Index_20221011144250.vue
new file mode 100644
index 0000000000000000000000000000000000000000..231a9af88eb29e5edbc6252ab88d85c5a140a5a8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144250.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144255.vue b/.history/src/views/index/Index_20221011144255.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f194071d17ccf36ca53284041501c0d4561b9570
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144255.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144257.vue b/.history/src/views/index/Index_20221011144257.vue
new file mode 100644
index 0000000000000000000000000000000000000000..745de9400f0557761f3a5b59cddd1256443b08e7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144257.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144259.vue b/.history/src/views/index/Index_20221011144259.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e5c512a17d4aede8356143d69d5d4e19a312811
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144259.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <span>家庭保洁</span>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144301.vue b/.history/src/views/index/Index_20221011144301.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3998ae300966298300e91dc4d05c405b9231a453
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144301.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144314.vue b/.history/src/views/index/Index_20221011144314.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5284aa4a7b43dccc66212f12200557bca26f7f5d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144314.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      // line-height: 150px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144324.vue b/.history/src/views/index/Index_20221011144324.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9834213fe55066cafd2fac2d4e863eccb8798def
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144324.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144405.vue b/.history/src/views/index/Index_20221011144405.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56efd5e6a15e540db68dc5db2dce1fc5d8d3e5d3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144405.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>xingbaomu</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144410.vue b/.history/src/views/index/Index_20221011144410.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be367469cbe0107d5d9aac1b77f13107e2b4dfcf
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144410.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>xing</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144416.vue b/.history/src/views/index/Index_20221011144416.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bbe62d8d5a0091498076df0166213fe8d6f22aba
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144416.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144420.vue b/.history/src/views/index/Index_20221011144420.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bbe62d8d5a0091498076df0166213fe8d6f22aba
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144420.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144543.vue b/.history/src/views/index/Index_20221011144543.vue
new file mode 100644
index 0000000000000000000000000000000000000000..74f38a361387cf8020da70042b36f08c08ae06ad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144543.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144544.vue b/.history/src/views/index/Index_20221011144544.vue
new file mode 100644
index 0000000000000000000000000000000000000000..603615b2fdc00bf85e00fa05bf25d38e37cc300a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144544.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data()
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144546.vue b/.history/src/views/index/Index_20221011144546.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ae0720ec0dfacb4eac4c427db9c47de201efe97c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144546.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144553.vue b/.history/src/views/index/Index_20221011144553.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c88a7e75a650f57c5f91e2b89fc38f60a219f591
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144553.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    l
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144556.vue b/.history/src/views/index/Index_20221011144556.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ae0720ec0dfacb4eac4c427db9c47de201efe97c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144556.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144600.vue b/.history/src/views/index/Index_20221011144600.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe31ec0a69c0730ce4062cfbadeb6e4e69d3b377
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144600.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    dataList
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144603.vue b/.history/src/views/index/Index_20221011144603.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ba6975bdc77bdfdebef5d1573451d2428db995be
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144603.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    dataList:12
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144604.vue b/.history/src/views/index/Index_20221011144604.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8cbf3fffc48fc8bf304ca88b759558580fee2f97
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144604.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    12;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144606.vue b/.history/src/views/index/Index_20221011144606.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ba6975bdc77bdfdebef5d1573451d2428db995be
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144606.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    dataList:12
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144737.vue b/.history/src/views/index/Index_20221011144737.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd3acd40450c019fb57ad7d9e0c7275e62e17393
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144737.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144739.vue b/.history/src/views/index/Index_20221011144739.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7567b371b70c91f113d45f4ba2af90dc26852da6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144739.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144742.vue b/.history/src/views/index/Index_20221011144742.vue
new file mode 100644
index 0000000000000000000000000000000000000000..545580865ccc2802748dafada6839d4827ce16d3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144742.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      dataList
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144743.vue b/.history/src/views/index/Index_20221011144743.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d48f3838925df12a51833726f7c5faae10a1e331
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144743.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      dataList:
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144749.vue b/.history/src/views/index/Index_20221011144749.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a581035b6c6666c973179a9d4ddbdf5e4eabe709
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144749.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>星保姆</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144803.vue b/.history/src/views/index/Index_20221011144803.vue
new file mode 100644
index 0000000000000000000000000000000000000000..92351a24371d0731341ef5691fc654179559081a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144803.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144825.vue b/.history/src/views/index/Index_20221011144825.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e38cd91644f1565ac8fac67490b458af540cc051
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144825.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li >
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144827.vue b/.history/src/views/index/Index_20221011144827.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea5c2afb35084978fd5672f6cf9485620a04de1a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144827.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for>
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144829.vue b/.history/src/views/index/Index_20221011144829.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48ef53634afa89351b54eb9a867cad3c56c13606
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144829.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for="">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144838.vue b/.history/src/views/index/Index_20221011144838.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36fc2f798303f5960a70565bb651de72a46669db
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144838.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for=""(item, i) in goodsData"">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144842.vue b/.history/src/views/index/Index_20221011144842.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f44e6a140067877dd91ff484a034e2994185beb2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144842.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for=""(item, i) in data"">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144843.vue b/.history/src/views/index/Index_20221011144843.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8749f5e173c817e9f75fe30170722656c8676746
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144843.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for=""(item, i) in dataL"">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144845.vue b/.history/src/views/index/Index_20221011144845.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa4e9c07e65206783b069683c4c78cd9da5e64f6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144845.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for=""(item, i) in dataList"">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144905.vue b/.history/src/views/index/Index_20221011144905.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b4c9f77a78398f8002b796024f889b95708cf84
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144905.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for="(item, i) in dataList"">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144908.vue b/.history/src/views/index/Index_20221011144908.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e06b236063cf9669a4278b41aa28225641d7428
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144908.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for="(item, i) in dataList">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144911.vue b/.history/src/views/index/Index_20221011144911.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7dfab1da4db6126389ce378474423526003fb643
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144911.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for="(item, i) in dataList" :key="">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011144914.vue b/.history/src/views/index/Index_20221011144914.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dc6ad46792eed493b2c4271bb5373efa747b42b9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011144914.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul>
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145022.vue b/.history/src/views/index/Index_20221011145022.vue
new file mode 100644
index 0000000000000000000000000000000000000000..183ed03ad954db45e28c7323561f11b936e97eb1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145022.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul >
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145025.vue b/.history/src/views/index/Index_20221011145025.vue
new file mode 100644
index 0000000000000000000000000000000000000000..93b14d5216086e15293e59cbe8e4c705d42b26b7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145025.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v->
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145026.vue b/.history/src/views/index/Index_20221011145026.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f62f3a3166c14cd42d34051162364d0aded2c9d3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145026.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145048.vue b/.history/src/views/index/Index_20221011145048.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5f5c972f90817b0e7d95f23336a0d88a446c78e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145048.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in dataList">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145053.vue b/.history/src/views/index/Index_20221011145053.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bbf3042cd359e570cc9e85692546d1e36d6454dd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145053.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in dataList">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145055.vue b/.history/src/views/index/Index_20221011145055.vue
new file mode 100644
index 0000000000000000000000000000000000000000..004eaf297f5d5cfef60b44319357d94efc8e9593
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145055.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in dataList">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ul
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145059.vue b/.history/src/views/index/Index_20221011145059.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0d7815969d22ffc738219d7516a08592d29d328c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145059.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in dataList">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145100.vue b/.history/src/views/index/Index_20221011145100.vue
new file mode 100644
index 0000000000000000000000000000000000000000..598f2a1d79a4709389132535c77babb5653833d1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145100.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in dataList">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList:2
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145101.vue b/.history/src/views/index/Index_20221011145101.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f2ace4d904869a523943f2a3147c2adf0890a76f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145101.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in dataList">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145108.vue b/.history/src/views/index/Index_20221011145108.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd436591c080c41bc0595096beca0f74112a79c7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145108.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in dataList" :key="">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145110.vue b/.history/src/views/index/Index_20221011145110.vue
new file mode 100644
index 0000000000000000000000000000000000000000..15d4f24dd76203c3c1e38926572a2172a2a82818
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145110.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in dataList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145119.vue b/.history/src/views/index/Index_20221011145119.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d2b63c0e08abd0ad44f09e2387a1c6256f7deccc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145119.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145145.vue b/.history/src/views/index/Index_20221011145145.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d002a141cfce3a48b9bbc321ce075370e21284d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145145.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145147.vue b/.history/src/views/index/Index_20221011145147.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd6edfe715d17bb36aca5d35b034a7b38ba4f9a0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145147.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145233.vue b/.history/src/views/index/Index_20221011145233.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9be8a85865565ea998b186b8e078fd9def2ad745
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145233.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145248.vue b/.history/src/views/index/Index_20221011145248.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d807e0ee2fe37adc4a3a3d1eedfc15676c905137
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145248.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145256.vue b/.history/src/views/index/Index_20221011145256.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4eef6876d2dd1e619c3d3a362e039a8c8bd28b14
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145256.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145634.vue b/.history/src/views/index/Index_20221011145634.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e3e8bc51c01e163d8aa8f47c42088ac4ed917093
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145634.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145638.vue b/.history/src/views/index/Index_20221011145638.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e80478a6dbe7b21c9fc917d406c13f6e9d72cfef
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145638.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        mar
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145641.vue b/.history/src/views/index/Index_20221011145641.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e80478a6dbe7b21c9fc917d406c13f6e9d72cfef
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145641.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        mar
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145644.vue b/.history/src/views/index/Index_20221011145644.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2fd8c93611cde57588ba7d26f95d796490953d22
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145644.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: ;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145648.vue b/.history/src/views/index/Index_20221011145648.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3e20f8b2be822f60f93668114ca071bea377e7d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145648.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145657.vue b/.history/src/views/index/Index_20221011145657.vue
new file mode 100644
index 0000000000000000000000000000000000000000..407a506b9a765790ba1c196f5b67efe784ee41ff
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145657.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145704.vue b/.history/src/views/index/Index_20221011145704.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3e20f8b2be822f60f93668114ca071bea377e7d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145704.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145710.vue b/.history/src/views/index/Index_20221011145710.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a210258d4e8a87ab7af85273809c66b42dfee99
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145710.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145727.vue b/.history/src/views/index/Index_20221011145727.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f206aa3542fb2b63ee7c9e9abeb82ee12d9f581d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145727.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145815.vue b/.history/src/views/index/Index_20221011145815.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b7769f0eb1e7740ffa90bec4ebd40f21c77d505
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145815.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="ba">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145819.vue b/.history/src/views/index/Index_20221011145819.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0bebcc494f8168aab7db670ade6870ce70028796
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145819.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145829.vue b/.history/src/views/index/Index_20221011145829.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f206aa3542fb2b63ee7c9e9abeb82ee12d9f581d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145829.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011145836.vue b/.history/src/views/index/Index_20221011145836.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d5be52b0924c28c8b7aed49dac13cc2ca974a19f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011145836.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150023.vue b/.history/src/views/index/Index_20221011150023.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3eb092e9fc2d8982e9a0c23d5f1f5fa22d1854d5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150023.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe indicatorbox-item" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150025.vue b/.history/src/views/index/Index_20221011150025.vue
new file mode 100644
index 0000000000000000000000000000000000000000..488aa0003429d38d7ec862f97465d9ddd1ada057
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150025.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe
+        class="my-swipe indicatorbox-item"
+        indicator-color="black"
+        :autoplay="3000"
+      >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150043.vue b/.history/src/views/index/Index_20221011150043.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ad3bf100a5a8a897ded5cc6d48e88169651ff96
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150043.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe
+        class="my-swipe indicatorbox-item"
+        indicator-color="black"
+        :autoplay="3000"
+      >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item{
+        
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150053.vue b/.history/src/views/index/Index_20221011150053.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b4560bb956b685f68b717df24d85c627bbf356c2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150053.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe
+        class="my-swipe indicatorbox-item"
+        indicator-color="black"
+        :autoplay="3000"
+      >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item{
+            background: #4468ff;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150059.vue b/.history/src/views/index/Index_20221011150059.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53457b2abb7b5736473419b80dec6e2fee22a83c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150059.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" >
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe
+        class="my-swipe indicatorbox-item"
+        indicator-color="black"
+        :autoplay="3000"
+      >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item{
+            background: #4468ff;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150106.vue b/.history/src/views/index/Index_20221011150106.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b4560bb956b685f68b717df24d85c627bbf356c2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150106.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe
+        class="my-swipe indicatorbox-item"
+        indicator-color="black"
+        :autoplay="3000"
+      >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item{
+            background: #4468ff;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150116.vue b/.history/src/views/index/Index_20221011150116.vue
new file mode 100644
index 0000000000000000000000000000000000000000..562fcedc86c742bd3466d84849fb489258ea120d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150116.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe indicatorbox-item" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item {
+        background: #4468ff;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150134.vue b/.history/src/views/index/Index_20221011150134.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e8ce6a7a3eeb3306537a0822011a73ecb597799
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150134.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe indicatorbox-item" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item {
+        background: #4468ff;
+            border-radius: 2px;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150135.vue b/.history/src/views/index/Index_20221011150135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c93cacb6c6b791dcfce6a0db35f531be17991df4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150135.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe indicatorbox-item" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item {
+        background: #4468ff;
+        border-radius: 2px;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150219.vue b/.history/src/views/index/Index_20221011150219.vue
new file mode 100644
index 0000000000000000000000000000000000000000..863acb07ac25df63072f33d637fe50b52865b0e4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150219.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe indicatorbox-item" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item {
+        height: 4px;
+        width: 8px;
+        background: #4468ff;
+        border-radius: 2px;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150428.vue b/.history/src/views/index/Index_20221011150428.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f456dd028b08e86b4174bcb108acc4a7455ce7b9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150428.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe
+        class="my-swipe indicatorbox-item"
+        indicator-color="black"
+        :autoplay="3000"
+      >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      .indicatorbox-item{}
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150431.vue b/.history/src/views/index/Index_20221011150431.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3eb092e9fc2d8982e9a0c23d5f1f5fa22d1854d5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150431.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe indicatorbox-item" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150432.vue b/.history/src/views/index/Index_20221011150432.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dea572452bfd9d025a202e4cfb61f7eb2aafb181
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150432.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe " indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item> 
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150435.vue b/.history/src/views/index/Index_20221011150435.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0c313e357e21a314b1221ced0f534a4a6179293
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150435.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150451.vue b/.history/src/views/index/Index_20221011150451.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c0fded2d35b9cf7ac0633c33353f6f351e86f845
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150451.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" w>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150452.vue b/.history/src/views/index/Index_20221011150452.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88be44db258ec16cb23996d4089d23541f27deba
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150452.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" wid>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150454.vue b/.history/src/views/index/Index_20221011150454.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d4ad2719838a997af1d57749931737ef85db29bb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150454.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    // background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150551.vue b/.history/src/views/index/Index_20221011150551.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1ecf47ff85c9bc0dbcedbcac5cc3330bbf44471a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150551.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: red;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150557.vue b/.history/src/views/index/Index_20221011150557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5468d443c41cc0aeba9838d78f6d65fed671c3a5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150557.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: ;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150600.vue b/.history/src/views/index/Index_20221011150600.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1e0f046c66073429e7866e8c5a7d8bb4ef125339
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150600.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: #;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150602.vue b/.history/src/views/index/Index_20221011150602.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b96d91350405d80804f05012123e3f13025a6ad3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150602.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: r;
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150606.vue b/.history/src/views/index/Index_20221011150606.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea56518cc53bbc06e9b38ceea5bfcac90e8f863a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150606.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(220, 230, 255);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150621.vue b/.history/src/views/index/Index_20221011150621.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e50df33f9845a48097f49f7a67713be9d99204de
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150621.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(213, 224, 249);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150624.vue b/.history/src/views/index/Index_20221011150624.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5281dffccd9f97fee5c7af55be5c794e6b109304
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150624.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150746.vue b/.history/src/views/index/Index_20221011150746.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6a9c0c52b909fec61169e647a39dcf2ebdc8096
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150746.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    div.
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150749.vue b/.history/src/views/index/Index_20221011150749.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a81aad4eb7ee9514d54db3a23ff1c3c90bfeb92
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150749.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150808.vue b/.history/src/views/index/Index_20221011150808.vue
new file mode 100644
index 0000000000000000000000000000000000000000..76b74b0779ea5ccb4ffbcd368844abef8defdc4d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150808.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150809.vue b/.history/src/views/index/Index_20221011150809.vue
new file mode 100644
index 0000000000000000000000000000000000000000..08ad3082697ee511dfcd0f3a7424de32342ac15e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150809.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic{
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150811.vue b/.history/src/views/index/Index_20221011150811.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7735d0f809acf350d109de2ce48a04a8bb46315
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150811.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic{
+    wid
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150813.vue b/.history/src/views/index/Index_20221011150813.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3634987bd25b33faa4dc26eaad5a61d5badf42f6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150813.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic{
+    width: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150815.vue b/.history/src/views/index/Index_20221011150815.vue
new file mode 100644
index 0000000000000000000000000000000000000000..49ec901b7a0602e13ec73c32cc441de69307a754
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150815.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic{
+    width: 700px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150820.vue b/.history/src/views/index/Index_20221011150820.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f08b3a95c2937b5a7151f9a2b2d94f9738bfa9e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150820.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000" >
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic{
+    width: 700px;
+    height: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150831.vue b/.history/src/views/index/Index_20221011150831.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b74fd9e81fb11e3078f56fd6e70356f7861bc28f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150831.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150838.vue b/.history/src/views/index/Index_20221011150838.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f4912d4b34c25d0e164bb3d916086361aa844fd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150838.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150843.vue b/.history/src/views/index/Index_20221011150843.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd7f5befa9d2544e13afa7ff2b6653ff949e50ea
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150843.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150859.vue b/.history/src/views/index/Index_20221011150859.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af468e2926ac214e52246b57089b7619d9d65348
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150859.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/11.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150902.vue b/.history/src/views/index/Index_20221011150902.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f1298e0a614a29bdd4dfd58404ff1223a83742a0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150902.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150908.vue b/.history/src/views/index/Index_20221011150908.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aa565834216c8a03d6db4fe3e979bd3f57ceee29
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150908.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    img{
+      wid
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150915.vue b/.history/src/views/index/Index_20221011150915.vue
new file mode 100644
index 0000000000000000000000000000000000000000..15f7df6c5c9ff26542551a1bbede6b4aba59c426
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150915.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    img{
+      width: 100%;
+      height: ;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150917.vue b/.history/src/views/index/Index_20221011150917.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bf40d6b2dfcc6da4db7d6791bb5d96e2ed231d5d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150917.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    img{
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150918.vue b/.history/src/views/index/Index_20221011150918.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6350bd7d9334aa1c56975a824095e744a275015
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150918.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011150957.vue b/.history/src/views/index/Index_20221011150957.vue
new file mode 100644
index 0000000000000000000000000000000000000000..081b473415be797c4989384b2aeec0bab702fd17
--- /dev/null
+++ b/.history/src/views/index/Index_20221011150957.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151005.vue b/.history/src/views/index/Index_20221011151005.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce57f5ed30b15c3269ae688d13783bda9688f2f4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151005.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    mar
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151008.vue b/.history/src/views/index/Index_20221011151008.vue
new file mode 100644
index 0000000000000000000000000000000000000000..09801c576aa2ec9ec551ac72e32e73af4f7b3002
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151008.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: ;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151037.vue b/.history/src/views/index/Index_20221011151037.vue
new file mode 100644
index 0000000000000000000000000000000000000000..04af614057c930a50fb4b84db22b7a582e4c100c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151037.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151527.vue b/.history/src/views/index/Index_20221011151527.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b3f271c36c472553e0e2234cf4cf5202103e949
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151527.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151531.vue b/.history/src/views/index/Index_20221011151531.vue
new file mode 100644
index 0000000000000000000000000000000000000000..097c2646be6eca5e868ee499b29d7a8675081314
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151531.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    div
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151535.vue b/.history/src/views/index/Index_20221011151535.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9806d41d7a489fc55a600f1db64002baf648698a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151535.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    div.
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151539.vue b/.history/src/views/index/Index_20221011151539.vue
new file mode 100644
index 0000000000000000000000000000000000000000..175cc3e56eed8e78f44429f95d9cc9d713e8f4fd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151539.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    div.lala
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151541.vue b/.history/src/views/index/Index_20221011151541.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b9e3bc8e7692a3a13c90c2f3010ba96a0aeeed8a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151541.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151543.vue b/.history/src/views/index/Index_20221011151543.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf03497b9b53c96d9da9fab8bb73f425ed2bd507
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151543.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151547.vue b/.history/src/views/index/Index_20221011151547.vue
new file mode 100644
index 0000000000000000000000000000000000000000..622ef44f6bdb6bac458026313b8040d7bdcaa554
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151547.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151549.vue b/.history/src/views/index/Index_20221011151549.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9172c452c656e447a2e290e4b2c04cd832701e43
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151549.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="left"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151553.vue b/.history/src/views/index/Index_20221011151553.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94f6ae02d1de7e364a23a04e39706eb328c41852
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151553.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="righ"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151554.vue b/.history/src/views/index/Index_20221011151554.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d00034157c3415e007113429458582b66b940dfa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151554.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151600.vue b/.history/src/views/index/Index_20221011151600.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0b82ed90470185624a18c3ef3ba92dae6cb7f8b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151600.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  lala{
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151607.vue b/.history/src/views/index/Index_20221011151607.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ed4c4241d20748c6b4893c20c96b0b1183eb1388
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151607.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151609.vue b/.history/src/views/index/Index_20221011151609.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66758fc7001e8cbd2f563f5bbbb7225ee4e19a93
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151609.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151734.vue b/.history/src/views/index/Index_20221011151734.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bda182d8ee45ee13c3e9991675d7ae351da3383
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151734.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    wid
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151736.vue b/.history/src/views/index/Index_20221011151736.vue
new file mode 100644
index 0000000000000000000000000000000000000000..60b76b958e5e6b5385fc116cba0ca863809c4be0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151736.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    width: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151743.vue b/.history/src/views/index/Index_20221011151743.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d5ae68199aa8da5783b9c17101aa2ce240653240
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151743.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    width: 700px;
+    height: 160px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151747.vue b/.history/src/views/index/Index_20221011151747.vue
new file mode 100644
index 0000000000000000000000000000000000000000..87ffb6530d56cb951e1108c697c7022dfc5346c3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151747.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    width: 700px;
+    height: 160px;
+    back
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151750.vue b/.history/src/views/index/Index_20221011151750.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d915faa6b1e8d70a8a37eaf03586a1f5e424b8e0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151750.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    width: 700px;
+    height: 160px;
+    background-color: rgb;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151752.vue b/.history/src/views/index/Index_20221011151752.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d500d5c86124d595860118d21501999b39475359
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151752.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    width: 700px;
+    height: 160px;
+    background-color: rgb(150, 173, 231);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151756.vue b/.history/src/views/index/Index_20221011151756.vue
new file mode 100644
index 0000000000000000000000000000000000000000..97a9aa5185243fab20861e770c9e884cc91f918b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151756.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 173, 231);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151758.vue b/.history/src/views/index/Index_20221011151758.vue
new file mode 100644
index 0000000000000000000000000000000000000000..abf349f18961000e75200f28fe5fc8fa9ceb8385
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151758.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 231);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151801.vue b/.history/src/views/index/Index_20221011151801.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2948ef51ce47431394c59c99a1f1e86daf671f2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151801.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala{
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 248);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151817.vue b/.history/src/views/index/Index_20221011151817.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8287449a6550fca7638ef3c9d62f1d468c5ef5d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151817.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 248);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151857.vue b/.history/src/views/index/Index_20221011151857.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3c638765bc549f28f1cfe3420a59d4f10ef9c611
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151857.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 245);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151915.vue b/.history/src/views/index/Index_20221011151915.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2347a46b13b67f26bdeb07bec0ddb3ff87b4b6b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151915.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  mi
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 245);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151917.vue b/.history/src/views/index/Index_20221011151917.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d0cf05b0a49de599e13ce74fd6b6d8fd66c19dd5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151917.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  min-height: ;
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 245);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151923.vue b/.history/src/views/index/Index_20221011151923.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6266f1a52557cabf04e33c5099ee5f55a078a968
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151923.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  min-height: 500px;
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 245);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151952.vue b/.history/src/views/index/Index_20221011151952.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0991a3d66b357acae09b3f25a706d8f7313c2af3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151952.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">hoih
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  min-height: 500px;
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 245);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151953.vue b/.history/src/views/index/Index_20221011151953.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ee4c532e70bea3df9d493b3ae5e633191b222bb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151953.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">后悔
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  min-height: 500px;
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 245);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011151959.vue b/.history/src/views/index/Index_20221011151959.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6266f1a52557cabf04e33c5099ee5f55a078a968
--- /dev/null
+++ b/.history/src/views/index/Index_20221011151959.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  min-height: 500px;
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rgb(255, 249, 245);
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152008.vue b/.history/src/views/index/Index_20221011152008.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71fa3c49812a51a030fb283792689dcac48d711e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152008.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  min-height: 500px;
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: rfed;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152010.vue b/.history/src/views/index/Index_20221011152010.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e5f7399353a76e3d4a4c90987a69984954a49ffc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152010.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  min-height: 500px;
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152021.vue b/.history/src/views/index/Index_20221011152021.vue
new file mode 100644
index 0000000000000000000000000000000000000000..786664bcd564c75c0bd6e28d755ddf441c100b54
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152021.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152029.vue b/.history/src/views/index/Index_20221011152029.vue
new file mode 100644
index 0000000000000000000000000000000000000000..15cc26ab292d1b08e67bdc08b7e8f9d11b9a7ab3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152029.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152037.vue b/.history/src/views/index/Index_20221011152037.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b6091554015baaca2808db20923f2d1154eb44d0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152037.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 160px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152119.vue b/.history/src/views/index/Index_20221011152119.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a57da752d6e3d6f0cb48e1b5e2fefa20ee504665
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152119.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152123.vue b/.history/src/views/index/Index_20221011152123.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6c0bfa36a60225a6ac2aed5ac0aa52fb5794b212
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152123.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 3px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152124.vue b/.history/src/views/index/Index_20221011152124.vue
new file mode 100644
index 0000000000000000000000000000000000000000..214d1d8a21d070e5d2509d5fab6eeb1879b5dc6e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152124.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152129.vue b/.history/src/views/index/Index_20221011152129.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef9303add14968d7406c33c58727aa97e76390f8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152129.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    {
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152131.vue b/.history/src/views/index/Index_20221011152131.vue
new file mode 100644
index 0000000000000000000000000000000000000000..def59d945b2287690de4d5833bf51b92a92d271e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152131.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152133.vue b/.history/src/views/index/Index_20221011152133.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d7f869251b42a4d30eef871198c134555e7242b6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152133.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152135.vue b/.history/src/views/index/Index_20221011152135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..21db085d54e012cba4f289f04fc4fb4e7c74bd8b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152135.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      wid
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152140.vue b/.history/src/views/index/Index_20221011152140.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b71aff242a65ffd4204637050af66ce77274a5fd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152140.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152144.vue b/.history/src/views/index/Index_20221011152144.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0602fb876a0b23df82577050d1e8afa466a3d29c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152144.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      hei
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152148.vue b/.history/src/views/index/Index_20221011152148.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ed8730b0f3b8c5308c1a5329467fea29c9741d2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152148.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152155.vue b/.history/src/views/index/Index_20221011152155.vue
new file mode 100644
index 0000000000000000000000000000000000000000..14fc4fea1dd584b0dff9a15198cab1cb0c0f85b8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152155.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152201.vue b/.history/src/views/index/Index_20221011152201.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0cee6ed48ee009524440743c3fdd392eead03647
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152201.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152203.vue b/.history/src/views/index/Index_20221011152203.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5a601c8e6ee450c863ebca16df1b1f276c051d80
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152203.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/1" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152210.vue b/.history/src/views/index/Index_20221011152210.vue
new file mode 100644
index 0000000000000000000000000000000000000000..72380c42ba8abff111799e3b3993feb83ea9e7cc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152210.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/11647935348837-1" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152218.vue b/.history/src/views/index/Index_20221011152218.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eeb44454bc92fc97bc64b55704c25443c6f6ac0b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152218.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/11647935348837-1." alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152220.vue b/.history/src/views/index/Index_20221011152220.vue
new file mode 100644
index 0000000000000000000000000000000000000000..df91de22880da5843d11861640fa5711b78d3035
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152220.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/11647935348837-1.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152236.vue b/.history/src/views/index/Index_20221011152236.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c1d5b9730beef51e97c54dc9b4164e959ac30c5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152236.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15-1.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152239.vue b/.history/src/views/index/Index_20221011152239.vue
new file mode 100644
index 0000000000000000000000000000000000000000..57f8bd744fac1aacb1c47a04dcbedba8ce95799c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152239.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 100%;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152258.vue b/.history/src/views/index/Index_20221011152258.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a532dbc0c0495993be5d99dc2414918a114929a9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152258.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left{
+      width: 177px;
+      height: 326px;
+
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152313.vue b/.history/src/views/index/Index_20221011152313.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5da4b970582025b20ccdefa325f9e1e977599ffa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152313.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152323.vue b/.history/src/views/index/Index_20221011152323.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8c58420f6c22cfd6df4690f7a10f77cd07e10ecd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152323.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 56px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152324.vue b/.history/src/views/index/Index_20221011152324.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8afeaee8fbe2289fea55598a08386387072d5a30
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152324.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 506px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152333.vue b/.history/src/views/index/Index_20221011152333.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5da4b970582025b20ccdefa325f9e1e977599ffa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152333.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152346.vue b/.history/src/views/index/Index_20221011152346.vue
new file mode 100644
index 0000000000000000000000000000000000000000..285269091bd636b2ae2d45670ba93d95fc49c73d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152346.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152349.vue b/.history/src/views/index/Index_20221011152349.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fedc5a0c5977d69cdabce0b30250852bdba04f5e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152349.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      img{
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152357.vue b/.history/src/views/index/Index_20221011152357.vue
new file mode 100644
index 0000000000000000000000000000000000000000..640f904d6b51bd90eca7e592021930c0840512e2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152357.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      img{
+        width: 177px;
+      height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152455.vue b/.history/src/views/index/Index_20221011152455.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af1d98125a4255c61e73ca479d1f8107256b8ab1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152455.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152544.vue b/.history/src/views/index/Index_20221011152544.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68c86a41d984d81b1714bea9c4cbb31254963e54
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152544.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      back
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152549.vue b/.history/src/views/index/Index_20221011152549.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8192b8dae10a769a5db6ebda4c2383a4758f6b39
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152549.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color:
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152556.vue b/.history/src/views/index/Index_20221011152556.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5104131334be348e0af63cee65e9eea1473145ca
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152556.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color:sk
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152557.vue b/.history/src/views/index/Index_20221011152557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8192b8dae10a769a5db6ebda4c2383a4758f6b39
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152557.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color:
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152559.vue b/.history/src/views/index/Index_20221011152559.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8094661e7b93dd753f7cfb3054f76779809e67ab
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152559.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color:s;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152603.vue b/.history/src/views/index/Index_20221011152603.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f766f39542eef604ce676be9e3fee0590c34df6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152603.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color:skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152605.vue b/.history/src/views/index/Index_20221011152605.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b7d86721e7519a0e1c3711de28e6b2d08d90661
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152605.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152613.vue b/.history/src/views/index/Index_20221011152613.vue
new file mode 100644
index 0000000000000000000000000000000000000000..23b3a488d3cd7164042845585306fac2db63a807
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152613.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152640.vue b/.history/src/views/index/Index_20221011152640.vue
new file mode 100644
index 0000000000000000000000000000000000000000..29424979f81f6dc320533b64f08ebc8e7a7e57c6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152640.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152642.vue b/.history/src/views/index/Index_20221011152642.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e142162fa4eb19fffeeddf1a078a9085e7dbe2b0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152642.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152646.vue b/.history/src/views/index/Index_20221011152646.vue
new file mode 100644
index 0000000000000000000000000000000000000000..251db13d9d0d94ddc06618063ec04c6764484f09
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152646.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      felx
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152648.vue b/.history/src/views/index/Index_20221011152648.vue
new file mode 100644
index 0000000000000000000000000000000000000000..094327f95315988dec2f79295ed71ba28b0ac21b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152648.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152654.vue b/.history/src/views/index/Index_20221011152654.vue
new file mode 100644
index 0000000000000000000000000000000000000000..631fca36b57f072927d09e1538a5daada7c8a684
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152654.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: ;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152656.vue b/.history/src/views/index/Index_20221011152656.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0587cde05471c132d4a59c2f8b0bf9a79d46e64
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152656.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152657.vue b/.history/src/views/index/Index_20221011152657.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0587cde05471c132d4a59c2f8b0bf9a79d46e64
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152657.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152702.vue b/.history/src/views/index/Index_20221011152702.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bb03c45b40900f2a98d9057a80f4a7a2a228093e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152702.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      flex: 1;
+      back
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152703.vue b/.history/src/views/index/Index_20221011152703.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f12e89b9c9316086fa2ad1bcea51db88af8c271e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152703.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      flex: 1;
+      background-color: ;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152706.vue b/.history/src/views/index/Index_20221011152706.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e7290c88ab7efd7e6822aacc0af719a73835297
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152706.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right{
+      flex: 1;
+      background-color: aquamarine;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152708.vue b/.history/src/views/index/Index_20221011152708.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8a565f54252aa4b8b13303369425c997a6ee5bcc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152708.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <!-- <img src="../.././assets/imgs/15.gif" alt="" /> -->
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152720.vue b/.history/src/views/index/Index_20221011152720.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b06028d9157f9bcd53b372f6d4fdc81fef531b72
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152720.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/15.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152725.vue b/.history/src/views/index/Index_20221011152725.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c6cc836ad60c825db2e060261d5630da3f9da7f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152725.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.gif" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152731.vue b/.history/src/views/index/Index_20221011152731.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b3912ee4ee30de138813372dfd5a80d59d2ada61
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152731.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152743.vue b/.history/src/views/index/Index_20221011152743.vue
new file mode 100644
index 0000000000000000000000000000000000000000..afe021b5bb32fad278143109544faf216ab4e302
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152743.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152748.vue b/.history/src/views/index/Index_20221011152748.vue
new file mode 100644
index 0000000000000000000000000000000000000000..501bdab2d8e39d2e85f1d4736117443dea0c1b54
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152748.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/1.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152750.vue b/.history/src/views/index/Index_20221011152750.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ecdeb8261dc2218778c5d057f2b789de8aac5f47
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152750.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152806.vue b/.history/src/views/index/Index_20221011152806.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c304a18cfe0f2b974c28b179f5c6ed631b56e3b6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152806.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152810.vue b/.history/src/views/index/Index_20221011152810.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f9e5e2cb204104d7ab38ff4f41348ebb7259d9c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152810.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152817.vue b/.history/src/views/index/Index_20221011152817.vue
new file mode 100644
index 0000000000000000000000000000000000000000..63ed2d6b9129ba279a8144c87fb0a5fdc27d77a6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152817.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        flex: 1;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152822.vue b/.history/src/views/index/Index_20221011152822.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ec2db878030004e3a3e2d4fa5d1b14648315975e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152822.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{}
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152826.vue b/.history/src/views/index/Index_20221011152826.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c304a18cfe0f2b974c28b179f5c6ed631b56e3b6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152826.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152843.vue b/.history/src/views/index/Index_20221011152843.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ed09ffb2dbf33dd5a01b753905468b7a098bfeb6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152843.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        qw
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152845.vue b/.history/src/views/index/Index_20221011152845.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a7852fb643d14020f1f571f67cdd0e8d2398748
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152845.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        wid
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152846.vue b/.history/src/views/index/Index_20221011152846.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a065e61c323ff26356dae75fd7e4203aacb60a1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152846.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152849.vue b/.history/src/views/index/Index_20221011152849.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d78c556b9f930be50e0e9d1b83d13afff4a1a01c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152849.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152858.vue b/.history/src/views/index/Index_20221011152858.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6834c3792d873067d2032075b570ea16de465d5f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152858.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        heid
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152902.vue b/.history/src/views/index/Index_20221011152902.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b03ff9b275b18ade485414c43ab9b3831f818350
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152902.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152914.vue b/.history/src/views/index/Index_20221011152914.vue
new file mode 100644
index 0000000000000000000000000000000000000000..67cb73e3a745dfe977e86dfeb3b5e3ce4c86329b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152914.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    mar
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152918.vue b/.history/src/views/index/Index_20221011152918.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0fe7b1b150506fbfbc6093dc7299c2b1d5b5c3e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152918.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152924.vue b/.history/src/views/index/Index_20221011152924.vue
new file mode 100644
index 0000000000000000000000000000000000000000..787c2308ef9ba9005daf752855766567fa194828
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152924.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    amr
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152927.vue b/.history/src/views/index/Index_20221011152927.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6b269c4fb256080df0205b5b294bcebd4d5ddd8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152927.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    mar
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152930.vue b/.history/src/views/index/Index_20221011152930.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d9e835162ec25def5c0c20aa813b87d74813428c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152930.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: ;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011152932.vue b/.history/src/views/index/Index_20221011152932.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0f0ec1ee5cc1b4e6571c1cf1ac346afc634ddde
--- /dev/null
+++ b/.history/src/views/index/Index_20221011152932.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153135.vue b/.history/src/views/index/Index_20221011153135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4409c084ab3b29b6bfb927d96cc2d4a8e6bdb37c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153135.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    div.xiaoxi
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153137.vue b/.history/src/views/index/Index_20221011153137.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cff78e07c80e8479a03d40eef1dc8de59c0cefae
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153137.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153140.vue b/.history/src/views/index/Index_20221011153140.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e1a882742119f33301bf760edda579d2a9d5b70
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153140.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153147.vue b/.history/src/views/index/Index_20221011153147.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e88c53292b4c7ddd4d6cad14cd92d6b3adeccf7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153147.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153150.vue b/.history/src/views/index/Index_20221011153150.vue
new file mode 100644
index 0000000000000000000000000000000000000000..faf4e1aea8d3d90dac9f4bea43c0f11c9284322f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153150.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi{
+    wid
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153153.vue b/.history/src/views/index/Index_20221011153153.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a89ca1e2ea4bfca4590610f3c1fc28d32f32f345
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153153.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi{
+    width: 155px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153156.vue b/.history/src/views/index/Index_20221011153156.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a89ca1e2ea4bfca4590610f3c1fc28d32f32f345
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153156.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi{
+    width: 155px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153159.vue b/.history/src/views/index/Index_20221011153159.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3fbb1549e4eeef92726e59c572b13c5ddf3a476b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153159.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi{
+    width: 100;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153200.vue b/.history/src/views/index/Index_20221011153200.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eb6955f3d882de1b4c5fbb601f2d2797d4466998
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153200.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi{
+    width: 100%;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153205.vue b/.history/src/views/index/Index_20221011153205.vue
new file mode 100644
index 0000000000000000000000000000000000000000..63afa69ec6d0441672d27467ae78ddeb21e9c70e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153205.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img{
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi{
+    width: 100%;
+    height: 155px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153207.vue b/.history/src/views/index/Index_20221011153207.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ea88cba3f19a3026f72a90c3ee3dc4172316733
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153207.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153212.vue b/.history/src/views/index/Index_20221011153212.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f74878fdfc794080b1d05471e6af830d637c3d01
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153212.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    backdrop-filter: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153213.vue b/.history/src/views/index/Index_20221011153213.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d886144afe933ae0051be6ce99b38c874b9a0777
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153213.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    back
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153214.vue b/.history/src/views/index/Index_20221011153214.vue
new file mode 100644
index 0000000000000000000000000000000000000000..64f61959585adfb776bb3d01b1434c55cc3fa0e5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153214.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    background-color:
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153317.vue b/.history/src/views/index/Index_20221011153317.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f92613f8350b9a65d3c62a72f4dd2737fa9103a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153317.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    background-color:yell
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153320.vue b/.history/src/views/index/Index_20221011153320.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b418d0e6043be309d2bdea9028970e205a03ca6d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153320.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    background-color:yellow
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153321.vue b/.history/src/views/index/Index_20221011153321.vue
new file mode 100644
index 0000000000000000000000000000000000000000..197a4ce5c52fb7c8f79143531fbe94761ba2d8cd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153321.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    background-color: yellow;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153332.vue b/.history/src/views/index/Index_20221011153332.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8677918fbb6d90e14b7d26c16d305d3ef79c0939
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153332.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    background-color: yellow;
+    mar
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153335.vue b/.history/src/views/index/Index_20221011153335.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aeb739e62c76ad25164961b23dae70725c4976eb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153335.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    background-color: yellow;
+    margin-top: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153356.vue b/.history/src/views/index/Index_20221011153356.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b088161e5cd8c3c3a2c1d37cf49cebfa61a24473
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153356.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 100%;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153410.vue b/.history/src/views/index/Index_20221011153410.vue
new file mode 100644
index 0000000000000000000000000000000000000000..30add2ac5dce86029cc51390a4274fd481f6c53f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153410.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153414.vue b/.history/src/views/index/Index_20221011153414.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5cbad4a81681033fb5fbbfe2989d890fcf86a193
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153414.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    mar
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153417.vue b/.history/src/views/index/Index_20221011153417.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f83409f29e44a1061b8b43fd388b9601f8eb839b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153417.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153428.vue b/.history/src/views/index/Index_20221011153428.vue
new file mode 100644
index 0000000000000000000000000000000000000000..89657efee09d292c1f69eb3b644a643d46e79222
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153428.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153435.vue b/.history/src/views/index/Index_20221011153435.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8568653ed892e942ccb1b014ecf388cca983d3db
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153435.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153437.vue b/.history/src/views/index/Index_20221011153437.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d451e6b0884a94ea9bbd8116d5759370dfb422ee
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153437.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>xiaoxi</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153442.vue b/.history/src/views/index/Index_20221011153442.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b5dc4d5e9b4b9ee85c08f68640d5ecf7bc08af2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153442.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153445.vue b/.history/src/views/index/Index_20221011153445.vue
new file mode 100644
index 0000000000000000000000000000000000000000..89b127a28addb3704b563c16a7750bcc818364fe
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153445.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜</li></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153447.vue b/.history/src/views/index/Index_20221011153447.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b5dc4d5e9b4b9ee85c08f68640d5ecf7bc08af2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153447.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153453.vue b/.history/src/views/index/Index_20221011153453.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3865f033e058151a318c4cce0833177714c9f0ae
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153453.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <!-- <li>小喜</li> -->
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153503.vue b/.history/src/views/index/Index_20221011153503.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab48ee1a0a67dcd4e5572c1764f01f4e7aaed627
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153503.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153508.vue b/.history/src/views/index/Index_20221011153508.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bea0e0420a3f01afeaaf6dc231f04ca7d9a8f13a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153508.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153515.vue b/.history/src/views/index/Index_20221011153515.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d5bdce7af75e8f9e1dd77a987064565733522686
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153515.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153518.vue b/.history/src/views/index/Index_20221011153518.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5fbedf59cfa19ae821455a2aac7f888fb49639b5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153518.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153519.vue b/.history/src/views/index/Index_20221011153519.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce71739c1340fb578d49ae3d0d90c2d39feb43fa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153519.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153522.vue b/.history/src/views/index/Index_20221011153522.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5fbedf59cfa19ae821455a2aac7f888fb49639b5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153522.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153526.vue b/.history/src/views/index/Index_20221011153526.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7cc6d5f4e8e8d411a1afee7a2b0d8da363a0cbe
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153526.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      dis
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153527.vue b/.history/src/views/index/Index_20221011153527.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66891967c451399d1c0279177404908982caebb2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153527.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153535.vue b/.history/src/views/index/Index_20221011153535.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6ebd86418f14bbb30cf947331a3592bbca6a566
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153535.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153537.vue b/.history/src/views/index/Index_20221011153537.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8290412399e8ade3cbb0dc88b568c6ef0210d9b1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153537.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153539.vue b/.history/src/views/index/Index_20221011153539.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9b90684f71967621b00ac08189011f09f3ea4d7b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153539.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153543.vue b/.history/src/views/index/Index_20221011153543.vue
new file mode 100644
index 0000000000000000000000000000000000000000..815c910cf0573045dfc3f403bb0dba86fc3c7adb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153543.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153546.vue b/.history/src/views/index/Index_20221011153546.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6813448e1e799e04bcf683d31ad2221c30b16d4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153546.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153549.vue b/.history/src/views/index/Index_20221011153549.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9b90684f71967621b00ac08189011f09f3ea4d7b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153549.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153557.vue b/.history/src/views/index/Index_20221011153557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66891967c451399d1c0279177404908982caebb2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153557.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153614.vue b/.history/src/views/index/Index_20221011153614.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6ebd86418f14bbb30cf947331a3592bbca6a566
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153614.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153615.vue b/.history/src/views/index/Index_20221011153615.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8290412399e8ade3cbb0dc88b568c6ef0210d9b1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153615.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153618.vue b/.history/src/views/index/Index_20221011153618.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9da065955406a516fb5d30ca9ebbfb5acd68cca6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153618.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153620.vue b/.history/src/views/index/Index_20221011153620.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42b9d3e61d98c56b7a981eea886cf99cc88a3a52
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153620.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153621.vue b/.history/src/views/index/Index_20221011153621.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66ee1f9b83314f9a9b351c604af2e69fbc7b3e7d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153621.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth($list: , $n: )
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153623.vue b/.history/src/views/index/Index_20221011153623.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42b9d3e61d98c56b7a981eea886cf99cc88a3a52
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153623.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153626.vue b/.history/src/views/index/Index_20221011153626.vue
new file mode 100644
index 0000000000000000000000000000000000000000..18fe228dbc760d42f30b696054c4450568d81581
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153626.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth-of-type(1,
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153628.vue b/.history/src/views/index/Index_20221011153628.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e85d697dd5c0e892d2a09aeb0fb0977f6ac425c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153628.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth-of-type(1
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153629.vue b/.history/src/views/index/Index_20221011153629.vue
new file mode 100644
index 0000000000000000000000000000000000000000..20c39036af309acc23a922d79b268a1ff4c63374
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153629.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth-of-type(1)
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153631.vue b/.history/src/views/index/Index_20221011153631.vue
new file mode 100644
index 0000000000000000000000000000000000000000..45065404fcb01e7fe06ba6399800e2e8c1cf1523
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153631.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth-of-type(1){
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153633.vue b/.history/src/views/index/Index_20221011153633.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db453c30c30fcc0465aa1b5fcfcfce9d2e15a605
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153633.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth-of-type(1){
+        font
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153637.vue b/.history/src/views/index/Index_20221011153637.vue
new file mode 100644
index 0000000000000000000000000000000000000000..544cdd031beefa770c8379349d8812d2a921c4d6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153637.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li :nth-of-type(1){
+        font-size: 30px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153715.vue b/.history/src/views/index/Index_20221011153715.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b0da6a832ebcb40fc3e0fc11994909cebc343591
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153715.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153722.vue b/.history/src/views/index/Index_20221011153722.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1fddc27ed300ee19afeeac89b1bac721bc5bdb29
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153722.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        FONT
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153724.vue b/.history/src/views/index/Index_20221011153724.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea1cae87002a33dbcebf88b7e93f769ba383ae21
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153724.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153725.vue b/.history/src/views/index/Index_20221011153725.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8735ff9938ce73db67320c2fe0f3760942d19bbe
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153725.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153731.vue b/.history/src/views/index/Index_20221011153731.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea01c8258b905f6c3046e5269ed6a980285cb46c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153731.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153733.vue b/.history/src/views/index/Index_20221011153733.vue
new file mode 100644
index 0000000000000000000000000000000000000000..806e8a5d39ee3fec0e7b249955445191a5805efa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153733.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153741.vue b/.history/src/views/index/Index_20221011153741.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea01c8258b905f6c3046e5269ed6a980285cb46c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153741.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153743.vue b/.history/src/views/index/Index_20221011153743.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8516c6325e1c8324d5c67b3c3451fd9f758caa7f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153743.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩</li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153812.vue b/.history/src/views/index/Index_20221011153812.vue
new file mode 100644
index 0000000000000000000000000000000000000000..df6447bb819397b4e256319f955e66aca7b5b4ad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153812.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span></span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153817.vue b/.history/src/views/index/Index_20221011153817.vue
new file mode 100644
index 0000000000000000000000000000000000000000..df6447bb819397b4e256319f955e66aca7b5b4ad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153817.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span></span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153820.vue b/.history/src/views/index/Index_20221011153820.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb8ea906fda4c8de2ec876d02129222d9aeb09aa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153820.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153833.vue b/.history/src/views/index/Index_20221011153833.vue
new file mode 100644
index 0000000000000000000000000000000000000000..792d5e08bea386360e1fe93fe80909317acf985e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153833.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153836.vue b/.history/src/views/index/Index_20221011153836.vue
new file mode 100644
index 0000000000000000000000000000000000000000..440f4e629baa838be8eef87fd075568563195943
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153836.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          dis
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153839.vue b/.history/src/views/index/Index_20221011153839.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3d916073d944999141c40bf98f081da4d41b1f3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153839.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153913.vue b/.history/src/views/index/Index_20221011153913.vue
new file mode 100644
index 0000000000000000000000000000000000000000..23223c23a9394cc1174db5faa41c224c9030d672
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153913.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          bacl
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153914.vue b/.history/src/views/index/Index_20221011153914.vue
new file mode 100644
index 0000000000000000000000000000000000000000..720dc54fc24332e96eda4157aae1fb15b8c79118
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153914.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          bac
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153916.vue b/.history/src/views/index/Index_20221011153916.vue
new file mode 100644
index 0000000000000000000000000000000000000000..881a2bf17e4cab830294701b8a5120f79cc309df
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153916.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153919.vue b/.history/src/views/index/Index_20221011153919.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7a94977a3cd40aa795a5e8b8df85b00aa8e30cb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153919.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153927.vue b/.history/src/views/index/Index_20221011153927.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ba72f05ab0d1109c3addf4bc556ef8fa2bc59b0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153927.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          tetx
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153928.vue b/.history/src/views/index/Index_20221011153928.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc3942c8445e7138cb4975018a0a607ca9740b55
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153928.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          text-align: c;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153929.vue b/.history/src/views/index/Index_20221011153929.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19ec22fc2038651c835dd66fad6870ab823da95c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153929.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153937.vue b/.history/src/views/index/Index_20221011153937.vue
new file mode 100644
index 0000000000000000000000000000000000000000..850655c78bd9fa9dff1cfccc6760c1bf4e445802
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153937.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          text-align: center;
+          bor
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153939.vue b/.history/src/views/index/Index_20221011153939.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc9e0359c0facb4f2d1ef1554f78be3d6402dc50
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153939.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border: ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153942.vue b/.history/src/views/index/Index_20221011153942.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c5f420346eb438599cc2c28befbec4b6960dcb5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153942.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-raa: ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153943.vue b/.history/src/views/index/Index_20221011153943.vue
new file mode 100644
index 0000000000000000000000000000000000000000..12f940d2dbf55d662d382e4543f9b3652450bfa4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153943.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-ra: ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153945.vue b/.history/src/views/index/Index_20221011153945.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b306db7106ef0c263b0c496e49b1b10065edf584
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153945.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011153948.vue b/.history/src/views/index/Index_20221011153948.vue
new file mode 100644
index 0000000000000000000000000000000000000000..41e63b68c23f713f9b268e461925c16ed16c02a0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011153948.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>小喜咩<span>叮咚</span></li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul{
+      display: flex;
+      li:nth-of-type(1){
+        font-size: 30px;
+        font-weight: 800;
+        span{
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius:30px ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154002.vue b/.history/src/views/index/Index_20221011154002.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e4e50e2d82d7c913075b08b8552d08ac02d7b6f2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154002.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜咩</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154056.vue b/.history/src/views/index/Index_20221011154056.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00c4af4d86578c6165826b94774da037533ffd48
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154056.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154114.vue b/.history/src/views/index/Index_20221011154114.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5646df7c5a491a8476c5002296b506ec54946ca
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154114.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(1)
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154116.vue b/.history/src/views/index/Index_20221011154116.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2ef865c4a1440771d2c7ce2cd190ddc50075d1f4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154116.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2)
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154118.vue b/.history/src/views/index/Index_20221011154118.vue
new file mode 100644
index 0000000000000000000000000000000000000000..142ed7ef1d6c53f7137f16dce08595b379ea8135
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154118.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2){
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154121.vue b/.history/src/views/index/Index_20221011154121.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46fa7f0a289927233057dd45d7a46e06857e4258
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154121.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2){
+        co
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154125.vue b/.history/src/views/index/Index_20221011154125.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e61dad44ef7765d806aa50f602ce500a3586fb3c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154125.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2){
+        color:or;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154126.vue b/.history/src/views/index/Index_20221011154126.vue
new file mode 100644
index 0000000000000000000000000000000000000000..065f095a2dbfb2afe1b969f3e747c431c7a62536
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154126.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2){
+        color:orange;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154128.vue b/.history/src/views/index/Index_20221011154128.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b14e434309b6b536f4afba26491ae10aeddd94df
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154128.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154139.vue b/.history/src/views/index/Index_20221011154139.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bd0a72d55ed0e531f42b6f813e8fc80fc50a0d6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154139.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154142.vue b/.history/src/views/index/Index_20221011154142.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5486ee191a6ff7a50e221c41e48471a17423d6fc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154142.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154145.vue b/.history/src/views/index/Index_20221011154145.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8db3c5e499b5a3b867c2f1a45e286032cefdd0b3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154145.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154146.vue b/.history/src/views/index/Index_20221011154146.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b21671da1187a02fb501f363ef972b3393ff3507
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154146.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154151.vue b/.history/src/views/index/Index_20221011154151.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50ed4db0d19054bef339b2f622c62750e97c45f9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154151.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154157.vue b/.history/src/views/index/Index_20221011154157.vue
new file mode 100644
index 0000000000000000000000000000000000000000..15b9210a2fa485fcdcdf64c15bd687a2e65e3819
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154157.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154159.vue b/.history/src/views/index/Index_20221011154159.vue
new file mode 100644
index 0000000000000000000000000000000000000000..72edebc276766e0eba6e014bd577f4128367d332
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154159.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154221.vue b/.history/src/views/index/Index_20221011154221.vue
new file mode 100644
index 0000000000000000000000000000000000000000..edf265ea7f3aaeed9d56701b3a3774eb8429b20c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154221.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        back
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154225.vue b/.history/src/views/index/Index_20221011154225.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b30504b17f1de1049c8268afa2aa5438dd608e09
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154225.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        mar
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154227.vue b/.history/src/views/index/Index_20221011154227.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3ddc1bcc94441dd851b430b83c9f72a6479c654
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154227.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: ;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154231.vue b/.history/src/views/index/Index_20221011154231.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff25f5e9e230fed827e6ff09a388af2b947decc1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154231.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154244.vue b/.history/src/views/index/Index_20221011154244.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a46063d3f9148280dd84700bfbe86134acec6927
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154244.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154246.vue b/.history/src/views/index/Index_20221011154246.vue
new file mode 100644
index 0000000000000000000000000000000000000000..392e736cd8a760e8fc8721699626dc3d969ea413
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154246.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>叮咚</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154248.vue b/.history/src/views/index/Index_20221011154248.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6f0ab1c21e976235461f2922b590c40b4517401
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154248.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span></span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154256.vue b/.history/src/views/index/Index_20221011154256.vue
new file mode 100644
index 0000000000000000000000000000000000000000..155fdfbdaa2138cbc08c1f50e66a1c5ac65f808b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154256.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>深圳市已经有</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154258.vue b/.history/src/views/index/Index_20221011154258.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5fd9b27a900d4c66f9742d90f15dbf6b6d41ace
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154258.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>深圳市已经有19</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154302.vue b/.history/src/views/index/Index_20221011154302.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f325b11fbfc009c153ef503570168dcce461902
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154302.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>深圳市已经有1954315</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154307.vue b/.history/src/views/index/Index_20221011154307.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f8b7db37a0dcc8e1b12c71b9330a507777bddd8c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154307.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>深圳市已经有1954315已</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154312.vue b/.history/src/views/index/Index_20221011154312.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a692e6fd364dd4f088284730c1e1f2cff022b30f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154312.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>深圳市已经有1954315已成功yuy</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154313.vue b/.history/src/views/index/Index_20221011154313.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbfb2c248f77f83b0d9fa6c8e2f4fc4bfb0a408c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154313.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>深圳市已经有1954315已成功预约</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154317.vue b/.history/src/views/index/Index_20221011154317.vue
new file mode 100644
index 0000000000000000000000000000000000000000..585a7f180d0d6f4bb2de5ed3520aca04e0a80527
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154317.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>深圳市已经有1954315已成功预约qungxi</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154319.vue b/.history/src/views/index/Index_20221011154319.vue
new file mode 100644
index 0000000000000000000000000000000000000000..662b3652f33aba4aa57bfb5c0301b4acd03babad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154319.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154322.vue b/.history/src/views/index/Index_20221011154322.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8a5298552614531b0d0b60a2f91319cc3e971cd6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154322.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154337.vue b/.history/src/views/index/Index_20221011154337.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b1f49b555538c421fcbdec822e99e043a442b52
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154337.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154339.vue b/.history/src/views/index/Index_20221011154339.vue
new file mode 100644
index 0000000000000000000000000000000000000000..761a7fa05de47863268dbce73a5ec899ace076f6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154339.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span{
+          
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154341.vue b/.history/src/views/index/Index_20221011154341.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5393bfb9ee110869abbb6baa7827a31651db4970
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154341.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span{
+          colo
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154343.vue b/.history/src/views/index/Index_20221011154343.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02d067ccddbf51d7b7e0db06c5c25321dffefd6e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154343.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span{
+          color: ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154403.vue b/.history/src/views/index/Index_20221011154403.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc92b24ddbc56fb40c64466d3232c082110b3025
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154403.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span{
+          color: rgb(red, green, blue);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154406.vue b/.history/src/views/index/Index_20221011154406.vue
new file mode 100644
index 0000000000000000000000000000000000000000..123787ab468fadf7b0d07f213ca26754a98dad97
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154406.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span{
+          color: rgb(136, green, blue);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154409.vue b/.history/src/views/index/Index_20221011154409.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d2ca7e3fd09f563a8a0a05158a5e6ef9ac1e1d0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154409.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span{
+          color: rgb(136, 136, blue);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011154410.vue b/.history/src/views/index/Index_20221011154410.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b9a74f9945f86a498e8b2b4c109ae92659b59ae
--- /dev/null
+++ b/.history/src/views/index/Index_20221011154410.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <span>深圳市已经有1954315已成功预约清洗服务！</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span{
+          color: rgb(136, 136, 136);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155743.vue b/.history/src/views/index/Index_20221011155743.vue
new file mode 100644
index 0000000000000000000000000000000000000000..afcd8edbd6fd25af8df5e7036773e2575cba1f60
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155743.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        span{
+          color: rgb(136, 136, 136);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155753.vue b/.history/src/views/index/Index_20221011155753.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8c5d77f939f9c9efcc8ac06378c6d609c4a6a4e6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155753.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155828.vue b/.history/src/views/index/Index_20221011155828.vue
new file mode 100644
index 0000000000000000000000000000000000000000..055e0b2f123b8a1e6d06265d38446232373f32ba
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155828.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155833.vue b/.history/src/views/index/Index_20221011155833.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0359fb07ae369b1c08364886ffa097f8a725b749
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155833.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155851.vue b/.history/src/views/index/Index_20221011155851.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0278445def18a46cdc9c237889a318d993acc453
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155851.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        buttt
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155852.vue b/.history/src/views/index/Index_20221011155852.vue
new file mode 100644
index 0000000000000000000000000000000000000000..15028ac8327679910f10b915a6ed810b5ba9bc04
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155852.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        butt
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155854.vue b/.history/src/views/index/Index_20221011155854.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3458862b4df84148f8807034cbf4af15a1bc5baa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155854.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        button
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155855.vue b/.history/src/views/index/Index_20221011155855.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0659a9398fdb10a7effe9a97fca9b7a1b4ca3ae5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155855.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        button{
+          
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155859.vue b/.history/src/views/index/Index_20221011155859.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71bc2baf83b2ed28f5fa43981c6e94991556ea72
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155859.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        button{
+          back
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155903.vue b/.history/src/views/index/Index_20221011155903.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ddb30b537bdd18379f1344de978e4968f6509c5a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155903.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        button{
+          background-color: red;
+          
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155906.vue b/.history/src/views/index/Index_20221011155906.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ab430cc8bc8006edf2519ab9137383d1b43a334
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155906.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        button{
+          background-color: red;
+          border
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155909.vue b/.history/src/views/index/Index_20221011155909.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7303f07e46dfe5af9ccab79479447ea1a68c03b8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155909.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        button{
+          background-color: red;
+          border-radius: ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155913.vue b/.history/src/views/index/Index_20221011155913.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1d9e7647807a309ab3b2c60847bfe8252f965273
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155913.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p{
+          color: rgb(136, 136, 136);
+        }
+        button{
+          background-color: red;
+          border-radius: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155915.vue b/.history/src/views/index/Index_20221011155915.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7e5cd85663545ef089a2f0406b437a2cf27a809a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155915.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155923.vue b/.history/src/views/index/Index_20221011155923.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af107db5fffa958eb383bf990ee2d005649b7ebf
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155923.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          colo
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155925.vue b/.history/src/views/index/Index_20221011155925.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d1ee7cb482d2c511952a13c3829fa0bf796fa582
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155925.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011155956.vue b/.history/src/views/index/Index_20221011155956.vue
new file mode 100644
index 0000000000000000000000000000000000000000..14034d317b10cac5f7c787f3f4905e27994645bb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011155956.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        mar
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160000.vue b/.history/src/views/index/Index_20221011160000.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce09ccb54d8592504d66a83c5d467d542a025f5f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160000.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: ;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160003.vue b/.history/src/views/index/Index_20221011160003.vue
new file mode 100644
index 0000000000000000000000000000000000000000..190c69eab6245174452f2ee3f669dd45b18605f9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160003.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 20px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160011.vue b/.history/src/views/index/Index_20221011160011.vue
new file mode 100644
index 0000000000000000000000000000000000000000..766d72279fcbc47b22f413cd99e9ffd696b56bf9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160011.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160037.vue b/.history/src/views/index/Index_20221011160037.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b648a64a76d8413dc0e6a21798972f16e4e6952a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160037.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160041.vue b/.history/src/views/index/Index_20221011160041.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4cc4b33c6d2d092dd9bb8110811dc455a93c4feb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160041.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160047.vue b/.history/src/views/index/Index_20221011160047.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ad20cf630280b345d1ff21ef417af8bf156c79c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160047.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+          
+        </li>
+        <li>
+      <button>去看看>></button>
+          
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160049.vue b/.history/src/views/index/Index_20221011160049.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eec0acd675aa230a00983133304aac33d120fcbd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160049.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160059.vue b/.history/src/views/index/Index_20221011160059.vue
new file mode 100644
index 0000000000000000000000000000000000000000..74a60a42628278727f3adadd11316d8db717d12f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160059.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+     
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160102.vue b/.history/src/views/index/Index_20221011160102.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c28271a58c96395a956b51fa0bc0a8225bb99e03
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160102.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160105.vue b/.history/src/views/index/Index_20221011160105.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4d3b26053f7fcfee977169ffa38e001fb0033f49
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160105.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160107.vue b/.history/src/views/index/Index_20221011160107.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e04d8f2af6e4a64d2cba8862f015fb86d72a49e1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160107.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nt
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160109.vue b/.history/src/views/index/Index_20221011160109.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00a7360190172a065f842db3d47018d7c3aa2a3e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160109.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160111.vue b/.history/src/views/index/Index_20221011160111.vue
new file mode 100644
index 0000000000000000000000000000000000000000..155a6d57ad54df5125da38fb84bc159770bceeeb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160111.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160114.vue b/.history/src/views/index/Index_20221011160114.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbc7d9842420a20fa07e76625136553834026cbf
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160114.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+           button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160117.vue b/.history/src/views/index/Index_20221011160117.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bbb6f81b53ef6725faa21f004c6d1db8a89a8758
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160117.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160127.vue b/.history/src/views/index/Index_20221011160127.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bc19a7e8014a0201674fb8a085a246931ff6de6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160127.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          mar
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160130.vue b/.history/src/views/index/Index_20221011160130.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f855c72f0bf9b23094607828b2ec6f17d79defb5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160130.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160132.vue b/.history/src/views/index/Index_20221011160132.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0cfc62755cb3f8b8c1c9e6f930a143f1adc0abc5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160132.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 30px;
+          
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160134.vue b/.history/src/views/index/Index_20221011160134.vue
new file mode 100644
index 0000000000000000000000000000000000000000..65a8081926b2a152ae0173bb0db07809384dcc5a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160134.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 30px;
+          mar
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160136.vue b/.history/src/views/index/Index_20221011160136.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe5a36f3d7f0470ac50bb2bb1f43b0e2922bbf43
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160136.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 30px;
+          margin-top: ;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160138.vue b/.history/src/views/index/Index_20221011160138.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fc076939e5f9eb5890a0c35eafc25e8c1fcdb3d4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160138.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 30px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160146.vue b/.history/src/views/index/Index_20221011160146.vue
new file mode 100644
index 0000000000000000000000000000000000000000..907642a13bb273aaaeaafdb3ab4bb134cd7f856e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160146.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160155.vue b/.history/src/views/index/Index_20221011160155.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1deb47ded0be84c15591a533e6da752b62339a8b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160155.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160215.vue b/.history/src/views/index/Index_20221011160215.vue
new file mode 100644
index 0000000000000000000000000000000000000000..96920d1f5162c35bd01ca80662785503c850feaa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160215.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        mar
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160218.vue b/.history/src/views/index/Index_20221011160218.vue
new file mode 100644
index 0000000000000000000000000000000000000000..18ac639b691e999aa04738c0c9b41ac88056613c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160218.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        margin-bottom: ;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160220.vue b/.history/src/views/index/Index_20221011160220.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53e45cde9db5130cb3a45b05305bb62bea883fa4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160220.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        margin-bottom: 20px;
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160230.vue b/.history/src/views/index/Index_20221011160230.vue
new file mode 100644
index 0000000000000000000000000000000000000000..922b445cdaadd28a719e8452b3ef64039521bdcc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160230.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        
+        p {
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160233.vue b/.history/src/views/index/Index_20221011160233.vue
new file mode 100644
index 0000000000000000000000000000000000000000..881450c1278a3a62adb973ecf47cafe0a7c1afe4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160233.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        
+        p {
+          margin-bottom: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160238.vue b/.history/src/views/index/Index_20221011160238.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17fa9ccfb1c18d2513e80835808e21604fec4869
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160238.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160246.vue b/.history/src/views/index/Index_20221011160246.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f54e4798954c04a155c0940959b3dd941588b081
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160246.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160250.vue b/.history/src/views/index/Index_20221011160250.vue
new file mode 100644
index 0000000000000000000000000000000000000000..571e7d6c5aa55f54c7efc5effdf983f1e210d3c3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160250.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160256.vue b/.history/src/views/index/Index_20221011160256.vue
new file mode 100644
index 0000000000000000000000000000000000000000..05e4634e954590d374eb0505a5e11470ecb54ad8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160256.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160527.vue b/.history/src/views/index/Index_20221011160527.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7c1c62f13c4c5815b9db9a1b6195cf62ee33a09
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160527.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160536.vue b/.history/src/views/index/Index_20221011160536.vue
new file mode 100644
index 0000000000000000000000000000000000000000..acd8d8d155f93a217274ba7fb6e4308fa235c3af
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160536.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    div.
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160540.vue b/.history/src/views/index/Index_20221011160540.vue
new file mode 100644
index 0000000000000000000000000000000000000000..40ac0696219932f84b7141731520a14d0349dce5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160540.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160552.vue b/.history/src/views/index/Index_20221011160552.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf564cb71f88af2b07883dda0ae456766fc4756d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160552.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160555.vue b/.history/src/views/index/Index_20221011160555.vue
new file mode 100644
index 0000000000000000000000000000000000000000..273c90c27edc1cf24c5024c78b3ea2d5615f604a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160555.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160557.vue b/.history/src/views/index/Index_20221011160557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd6b88e1a5009bf5161d4b8f67f4eb7bf5bba8cc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160557.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi{
+    wid
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160601.vue b/.history/src/views/index/Index_20221011160601.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75c9b00fde2027b4ad02ead913d0e4564711ee42
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160601.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi{
+    width: 700px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160605.vue b/.history/src/views/index/Index_20221011160605.vue
new file mode 100644
index 0000000000000000000000000000000000000000..929cbb1a5840a64109fb3c80cd89555df9eb36a8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160605.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi{
+    width: 700px;
+    height: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160609.vue b/.history/src/views/index/Index_20221011160609.vue
new file mode 100644
index 0000000000000000000000000000000000000000..865c74b22b0e538acb96bde519324df16d020f6f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160609.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi{
+    width: 700px;
+    height: 448px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160611.vue b/.history/src/views/index/Index_20221011160611.vue
new file mode 100644
index 0000000000000000000000000000000000000000..39836e788640071bf6d39cf3c94da97a110f9373
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160611.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi{
+    width: 700px;
+    height: 448px;
+    back
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160613.vue b/.history/src/views/index/Index_20221011160613.vue
new file mode 100644
index 0000000000000000000000000000000000000000..890ed470d9379bc8d23396b5fc4c90a71ec9199d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160613.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi{
+    width: 700px;
+    height: 448px;
+    background-color: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160615.vue b/.history/src/views/index/Index_20221011160615.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b401671c69c8036ac460568477e4de21693b4a7b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160615.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi{
+    width: 700px;
+    height: 448px;
+    background-color: or;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160616.vue b/.history/src/views/index/Index_20221011160616.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48dd9418ef574470d49f221595d71ff625cd6e2d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160616.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi{
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160617.vue b/.history/src/views/index/Index_20221011160617.vue
new file mode 100644
index 0000000000000000000000000000000000000000..79bb667e2d28cce7f89c36e695d311dc0b56cde4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160617.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160620.vue b/.history/src/views/index/Index_20221011160620.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ced876bd54069e5ad82489245cb8f87f0035fd73
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160620.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    bor
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160623.vue b/.history/src/views/index/Index_20221011160623.vue
new file mode 100644
index 0000000000000000000000000000000000000000..23bbe2d83993c1be4d5d2cee5b13fce3fbccbc55
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160623.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: ;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160627.vue b/.history/src/views/index/Index_20221011160627.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43cc3dcbd095c56ab4be66b5ab51e013a58f7fad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160627.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160628.vue b/.history/src/views/index/Index_20221011160628.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43cc3dcbd095c56ab4be66b5ab51e013a58f7fad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160628.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160635.vue b/.history/src/views/index/Index_20221011160635.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3bdc95519e7c8d4a7c2926c17da92a8cdefc5986
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160635.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160637.vue b/.history/src/views/index/Index_20221011160637.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c1e0107db96db49750a9f040d3c3527f8add60e9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160637.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    mar
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160641.vue b/.history/src/views/index/Index_20221011160641.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e4ed67c31ef563d117352d49d7bc6a1a56f415ea
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160641.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011160651.vue b/.history/src/views/index/Index_20221011160651.vue
new file mode 100644
index 0000000000000000000000000000000000000000..98d2539c8be5083fcde6592340e39748070ffc98
--- /dev/null
+++ b/.history/src/views/index/Index_20221011160651.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161016.vue b/.history/src/views/index/Index_20221011161016.vue
new file mode 100644
index 0000000000000000000000000000000000000000..076cf3cc93090e33d45684f14a8f0fd894a579ab
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161016.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161019.vue b/.history/src/views/index/Index_20221011161019.vue
new file mode 100644
index 0000000000000000000000000000000000000000..297e24666941c789e5f2e04c637c175c44dc5a17
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161019.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time，
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161021.vue b/.history/src/views/index/Index_20221011161021.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bff410a478d89f6e6b0d7e0e816ef5d0fdc87087
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161021.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161030.vue b/.history/src/views/index/Index_20221011161030.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f173e1dee7fc27b9472a0f8996333d15ce92649
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161030.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time:time
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161031.vue b/.history/src/views/index/Index_20221011161031.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9077c340772775bc77d61c948f757b28914147ed
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161031.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time:time,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161056.vue b/.history/src/views/index/Index_20221011161056.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c9635c91a64996ed7e6ceeff38a522c9f8d579e6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161056.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time:time,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161058.vue b/.history/src/views/index/Index_20221011161058.vue
new file mode 100644
index 0000000000000000000000000000000000000000..70ac9b32ec664affd99aab381597b9af8534a3d9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161058.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: time,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161103.vue b/.history/src/views/index/Index_20221011161103.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f060319ae1a0f7f80b574af48f33097539887264
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161103.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      // eslint-disable-next-line vue/valid-v-bind
+      <van-count-down :time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: time,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161105.vue b/.history/src/views/index/Index_20221011161105.vue
new file mode 100644
index 0000000000000000000000000000000000000000..70ac9b32ec664affd99aab381597b9af8534a3d9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161105.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: time,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161108.vue b/.history/src/views/index/Index_20221011161108.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c07d3838357f753e596aa9035915060faa5b9b9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161108.vue
@@ -0,0 +1,229 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: time,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161114.vue b/.history/src/views/index/Index_20221011161114.vue
new file mode 100644
index 0000000000000000000000000000000000000000..635b5ddb8b189233ba6a527c7155a86239311493
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161114.vue
@@ -0,0 +1,229 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: time,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161121.vue b/.history/src/views/index/Index_20221011161121.vue
new file mode 100644
index 0000000000000000000000000000000000000000..60f6783f39e10dd0a58b6e96167d5a180d2e1d8c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161121.vue
@@ -0,0 +1,229 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161122.vue b/.history/src/views/index/Index_20221011161122.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75d7e9e380dc3f9809139ef11a56588bedc2d4f4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161122.vue
@@ -0,0 +1,229 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161127.vue b/.history/src/views/index/Index_20221011161127.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19c04167a29a56f07d886af364feecebe0537e8d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161127.vue
@@ -0,0 +1,229 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes:,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161129.vue b/.history/src/views/index/Index_20221011161129.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71f021d1e90165499d1b95d4177d8923f06e7a80
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161129.vue
@@ -0,0 +1,229 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down time="{{minusRes}}" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161146.vue b/.history/src/views/index/Index_20221011161146.vue
new file mode 100644
index 0000000000000000000000000000000000000000..983225607cfbd5463d17a2dc278ffd08d4090200
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161146.vue
@@ -0,0 +1,229 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down time="{{minusRes}}" bind:change="onchange" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161215.vue b/.history/src/views/index/Index_20221011161215.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a92d546289de2ccd2afe05c3b452cb458f7dbf15
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161215.vue
@@ -0,0 +1,237 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="daojishi">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161227.vue b/.history/src/views/index/Index_20221011161227.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ca9013e00dd50b961e8be0f4e6604112acea384
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161227.vue
@@ -0,0 +1,237 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .daojishi {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161241.vue b/.history/src/views/index/Index_20221011161241.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2ef49b91e4986127071fbe4243975bc871994b6a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161241.vue
@@ -0,0 +1,237 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161303.vue b/.history/src/views/index/Index_20221011161303.vue
new file mode 100644
index 0000000000000000000000000000000000000000..042edcab683adbcc22e00eda421e59b3f17f279e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161303.vue
@@ -0,0 +1,245 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+  .colon {
+    display: inline-block;
+    margin: 0 4px;
+    color: #ee0a24;
+  }
+  .block {
+    display: inline-block;
+    width: 22px;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    background-color: #ee0a24;
+  }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161304.vue b/.history/src/views/index/Index_20221011161304.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9c9fd11469f894da16ae4021493b7611a8c0ae0b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161304.vue
@@ -0,0 +1,245 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161331.vue b/.history/src/views/index/Index_20221011161331.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2ef49b91e4986127071fbe4243975bc871994b6a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161331.vue
@@ -0,0 +1,237 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161333.vue b/.history/src/views/index/Index_20221011161333.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8491d76fb2ce9a8258feb31345236bd5d20e38ad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161333.vue
@@ -0,0 +1,250 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    .colon {
+    display: inline-block;
+    margin: 0 4px;
+    color: #ee0a24;
+  }
+  .block {
+    display: inline-block;
+    width: 22px;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    background-color: #ee0a24;
+  }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161334.vue b/.history/src/views/index/Index_20221011161334.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4623a7f842d65b5a316a63fd386ea5ba7de67979
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161334.vue
@@ -0,0 +1,250 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161402.vue b/.history/src/views/index/Index_20221011161402.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe1b24b9c3792b0c2033e64c704c4105b9952c65
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161402.vue
@@ -0,0 +1,251 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    pad
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161404.vue b/.history/src/views/index/Index_20221011161404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef474c1e31af268fef5f950eeca9ee02f97ff052
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161404.vue
@@ -0,0 +1,251 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: ;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161409.vue b/.history/src/views/index/Index_20221011161409.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54dfab1efdca33edcee774ebec16534aa8e85f49
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161409.vue
@@ -0,0 +1,251 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161412.vue b/.history/src/views/index/Index_20221011161412.vue
new file mode 100644
index 0000000000000000000000000000000000000000..adc574988259a70bc6365e542a1d1a7291ee45ae
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161412.vue
@@ -0,0 +1,251 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161425.vue b/.history/src/views/index/Index_20221011161425.vue
new file mode 100644
index 0000000000000000000000000000000000000000..57f5632fc44b360639fbe116e27ed050a3f82757
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161425.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161428.vue b/.history/src/views/index/Index_20221011161428.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d7969b53bb1fe1b15a1409702431d090a6216ac8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161428.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      dis
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161430.vue b/.history/src/views/index/Index_20221011161430.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d8b84cd8c012d89d44e9664d5d3673e31e27b00e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161430.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      po
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161433.vue b/.history/src/views/index/Index_20221011161433.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da3a4511f53a6268f1e3b36df57830679c4d5f43
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161433.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      position: relative;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161435.vue b/.history/src/views/index/Index_20221011161435.vue
new file mode 100644
index 0000000000000000000000000000000000000000..853730a46ba979cd45f9f3fc9895849a2e0f38a2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161435.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      position: absolute;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161439.vue b/.history/src/views/index/Index_20221011161439.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68b8aa28172565b4902ad3148ccd2f73e8923d19
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161439.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    po
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      position: absolute;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161440.vue b/.history/src/views/index/Index_20221011161440.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2af27fbb0bee3b144f82455e847f500640733345
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161440.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      position: absolute;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161446.vue b/.history/src/views/index/Index_20221011161446.vue
new file mode 100644
index 0000000000000000000000000000000000000000..792354e14aac251112b998f2962759c61ead14b8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161446.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161451.vue b/.history/src/views/index/Index_20221011161451.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a912b79d66c451029af2e08b9861c4bb1f9fe158
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161451.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161454.vue b/.history/src/views/index/Index_20221011161454.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d34a67f47d6a622fc254aaab1db78d067b22ebb8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161454.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      right: ;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161455.vue b/.history/src/views/index/Index_20221011161455.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff584da9c4f6e268dd8c043c86a10053d3256ce4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161455.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161509.vue b/.history/src/views/index/Index_20221011161509.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9b9ecb431bb1155da6c2c608d19c22da7cbf2047
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161509.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161512.vue b/.history/src/views/index/Index_20221011161512.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4019c2bbb13512c2b7de873a9abbbdb2e0342d9a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161512.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: ;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161514.vue b/.history/src/views/index/Index_20221011161514.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f3b042bea4aafca69aa39ec460ffe0a7dabb7ad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161514.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 30px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161522.vue b/.history/src/views/index/Index_20221011161522.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6de214ea939155674ff754255d58aef4f1fb46fd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161522.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 100px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161526.vue b/.history/src/views/index/Index_20221011161526.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f3b042bea4aafca69aa39ec460ffe0a7dabb7ad
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161526.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 30px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161531.vue b/.history/src/views/index/Index_20221011161531.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6cf4c7c747482f6e63d58244951581f028eb14bb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161531.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161538.vue b/.history/src/views/index/Index_20221011161538.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9087b0abe77e79d7d5a5bc72577eb52cdc3cb5cd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161538.vue
@@ -0,0 +1,255 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161546.vue b/.history/src/views/index/Index_20221011161546.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c6502567f406d7d3224ab65208f9bd7bc3770ae
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161546.vue
@@ -0,0 +1,255 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161632.vue b/.history/src/views/index/Index_20221011161632.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a2a5b911df3902b5690eba956ac1f5ebbde914b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161632.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      minusRes: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161651.vue b/.history/src/views/index/Index_20221011161651.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d811cbb020e8712c757c77893b2897c35b68d07a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161651.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161718.vue b/.history/src/views/index/Index_20221011161718.vue
new file mode 100644
index 0000000000000000000000000000000000000000..13e7106d26ba20b43b4da5b53ad2463939e8e37f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161718.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+      hours
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161720.vue b/.history/src/views/index/Index_20221011161720.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f806139df2563a816b4f03eb10a0c1200d59089c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161720.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+      hours:
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161725.vue b/.history/src/views/index/Index_20221011161725.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b519a28ce8c894d86750cb1ee33554beff18cd59
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161725.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+      hours:3
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161728.vue b/.history/src/views/index/Index_20221011161728.vue
new file mode 100644
index 0000000000000000000000000000000000000000..20c074797067d0970cc824d90d3a521f7b2216b6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161728.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+      hours: 3,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161736.vue b/.history/src/views/index/Index_20221011161736.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d811cbb020e8712c757c77893b2897c35b68d07a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161736.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161823.vue b/.history/src/views/index/Index_20221011161823.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6935e88c7cdbed1c99b46adcc4dd8f73749e0b0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161823.vue
@@ -0,0 +1,247 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+  <van-count-down :time="time" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161824.vue b/.history/src/views/index/Index_20221011161824.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4d2394df307eba706221f6936e97808ee7d0557d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161824.vue
@@ -0,0 +1,247 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161832.vue b/.history/src/views/index/Index_20221011161832.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06165b916162a605668e466de24dadbf03c5c9e4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161832.vue
@@ -0,0 +1,246 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+      right: 0;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161836.vue b/.history/src/views/index/Index_20221011161836.vue
new file mode 100644
index 0000000000000000000000000000000000000000..422595afba440c71852e551c9a483bf58eae5f20
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161836.vue
@@ -0,0 +1,231 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+  
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161848.vue b/.history/src/views/index/Index_20221011161848.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3aad543b0330b4a4badca6e532ea44ce988e551c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161848.vue
@@ -0,0 +1,230 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: "",
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161900.vue b/.history/src/views/index/Index_20221011161900.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a7bc921701d8eb11ea2f35c25bd6570f8b7ad3b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161900.vue
@@ -0,0 +1,230 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011161901.vue b/.history/src/views/index/Index_20221011161901.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c1406460daa5551d4ae6cc963a50275b1f21c2d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011161901.vue
@@ -0,0 +1,230 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162456.vue b/.history/src/views/index/Index_20221011162456.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3baefc880d4e217a208282f9f78d874389bcf33b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162456.vue
@@ -0,0 +1,230 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162527.vue b/.history/src/views/index/Index_20221011162527.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0cecbb783a2ff2648116a1a337328d899442ca3f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162527.vue
@@ -0,0 +1,238 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+  <template #default="timeData">
+    <span class="block">{{ timeData.hours }}</span>
+    <span class="colon">:</span>
+    <span class="block">{{ timeData.minutes }}</span>
+    <span class="colon">:</span>
+    <span class="block">{{ timeData.seconds }}</span>
+  </template>
+</van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162529.vue b/.history/src/views/index/Index_20221011162529.vue
new file mode 100644
index 0000000000000000000000000000000000000000..30f95b57e39807d5ce682faaa47446387b71fe5d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162529.vue
@@ -0,0 +1,238 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162539.vue b/.history/src/views/index/Index_20221011162539.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9f1ecd22a712c5c2498feac46d8a1bb1ba3d66c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162539.vue
@@ -0,0 +1,250 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+    display: inline-block;
+    margin: 0 4px;
+    color: #ee0a24;
+  }
+  .block {
+    display: inline-block;
+    width: 22px;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    background-color: #
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162554.vue b/.history/src/views/index/Index_20221011162554.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab55c0c188eb39a3707e2bd5f20f081d78db7456
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162554.vue
@@ -0,0 +1,250 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+    display: inline-block;
+    margin: 0 4px;
+    color: #ee0a24;
+  }
+  .block {
+    display: inline-block;
+    width: 22px;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    background-color: #ee0a24;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162559.vue b/.history/src/views/index/Index_20221011162559.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab55c0c188eb39a3707e2bd5f20f081d78db7456
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162559.vue
@@ -0,0 +1,250 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+    display: inline-block;
+    margin: 0 4px;
+    color: #ee0a24;
+  }
+  .block {
+    display: inline-block;
+    width: 22px;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    background-color: #ee0a24;
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162609.vue b/.history/src/views/index/Index_20221011162609.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5888420aed296198aa33e5dd8242e485de2de36
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162609.vue
@@ -0,0 +1,239 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162629.vue b/.history/src/views/index/Index_20221011162629.vue
new file mode 100644
index 0000000000000000000000000000000000000000..109d8cfabbb5ab0c7542e67f754b75717bd1cd47
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162629.vue
@@ -0,0 +1,251 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162714.vue b/.history/src/views/index/Index_20221011162714.vue
new file mode 100644
index 0000000000000000000000000000000000000000..316b9141721b48b3aa3756094bf7089672ba88a4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162714.vue
@@ -0,0 +1,251 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      // time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011162717.vue b/.history/src/views/index/Index_20221011162717.vue
new file mode 100644
index 0000000000000000000000000000000000000000..109d8cfabbb5ab0c7542e67f754b75717bd1cd47
--- /dev/null
+++ b/.history/src/views/index/Index_20221011162717.vue
@@ -0,0 +1,251 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163032.vue b/.history/src/views/index/Index_20221011163032.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c3519701d96fc9533b99a7010a6094b2d503612b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163032.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      FONT
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163035.vue b/.history/src/views/index/Index_20221011163035.vue
new file mode 100644
index 0000000000000000000000000000000000000000..74f9dd89dd5760586c8f5d2f84b8460b6ffd3de5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163035.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163038.vue b/.history/src/views/index/Index_20221011163038.vue
new file mode 100644
index 0000000000000000000000000000000000000000..006cad56f8921f842ffb1a3345b3a70b9ded2817
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163038.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: ;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163039.vue b/.history/src/views/index/Index_20221011163039.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d98028d32e5a7b4850143a4f3e48a051cc92f96b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163039.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 30px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163046.vue b/.history/src/views/index/Index_20221011163046.vue
new file mode 100644
index 0000000000000000000000000000000000000000..993a6175b38d55d33b30a79a129530851fc769d7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163046.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 30px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163051.vue b/.history/src/views/index/Index_20221011163051.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c15df65f40b8feb4775081d5b60ace17b2bc0975
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163051.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 30px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163056.vue b/.history/src/views/index/Index_20221011163056.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4c9d4155a52df6c96da3c767bae3b612f87f23d8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163056.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 30px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 30px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163106.vue b/.history/src/views/index/Index_20221011163106.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f8ef2f2c8cd22b02f6495df07315af28b3e784d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163106.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 30px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163109.vue b/.history/src/views/index/Index_20221011163109.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8e5be34da0e939cbfe6faa3800779ab5151edc7a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163109.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163116.vue b/.history/src/views/index/Index_20221011163116.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b619e7c76271477a15a2b65f59eec31509f8c9f6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163116.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163122.vue b/.history/src/views/index/Index_20221011163122.vue
new file mode 100644
index 0000000000000000000000000000000000000000..743b104e38a065068972d16eafb1a764c009f29e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163122.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 600px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163125.vue b/.history/src/views/index/Index_20221011163125.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8e5be34da0e939cbfe6faa3800779ab5151edc7a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163125.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163135.vue b/.history/src/views/index/Index_20221011163135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f8c74b401632efc7008e200fbb93f83c8713ed74
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163135.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 22px;
+      color: #fff;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163201.vue b/.history/src/views/index/Index_20221011163201.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7361dd2f2c74a0ef97a62eb887c865a232545db7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163201.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 40px;
+      color: #fff;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163207.vue b/.history/src/views/index/Index_20221011163207.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af03584ea022706549d57fe4465f9d9672aae208
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163207.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color: #fff;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163245.vue b/.history/src/views/index/Index_20221011163245.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e199355526b066e1d64646a271bb15a82390452b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163245.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color:#ee0a24;
+      text-align: center;
+      background-color: #ee0a24;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163249.vue b/.history/src/views/index/Index_20221011163249.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b7571a98a91c186152225543b43eb61912aec31
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163249.vue
@@ -0,0 +1,252 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color:#ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163306.vue b/.history/src/views/index/Index_20221011163306.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d52df87c8a7ba5dafd1f3b965112b69bb99503a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163306.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color:#ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163310.vue b/.history/src/views/index/Index_20221011163310.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e2cfb68987c9618e048f7afdda8626c80b2446d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163310.vue
@@ -0,0 +1,253 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color:#ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163337.vue b/.history/src/views/index/Index_20221011163337.vue
new file mode 100644
index 0000000000000000000000000000000000000000..139e8cebf85d287b99a4cc88ba3e214330fa9196
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163337.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      div
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color:#ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163341.vue b/.history/src/views/index/Index_20221011163341.vue
new file mode 100644
index 0000000000000000000000000000000000000000..10371a9d0173a37cc0d2eb30c2502d072bc390a6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163341.vue
@@ -0,0 +1,254 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock"></div>
+      <van-count-down :time="time">
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color:#ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163346.vue b/.history/src/views/index/Index_20221011163346.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9e9d1a8dda140ece0e986e64cdb175def1aa3893
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163346.vue
@@ -0,0 +1,246 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock"></div>
+   
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color:#ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163347.vue b/.history/src/views/index/Index_20221011163347.vue
new file mode 100644
index 0000000000000000000000000000000000000000..14d94a4821743d697ab872ced908d55b95498c0a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163347.vue
@@ -0,0 +1,255 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color: #ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163357.vue b/.history/src/views/index/Index_20221011163357.vue
new file mode 100644
index 0000000000000000000000000000000000000000..abffc828c8ba8b6807986db16a5e796279b6022f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163357.vue
@@ -0,0 +1,256 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color: #ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163400.vue b/.history/src/views/index/Index_20221011163400.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50828310bb35150c8811abf9e4748d1ee3e27bfb
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163400.vue
@@ -0,0 +1,256 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color: #ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163403.vue b/.history/src/views/index/Index_20221011163403.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36046c046f6073529b8bcb90de7694d611d8dc86
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163403.vue
@@ -0,0 +1,258 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .clock{
+      
+    }
+    .colon {
+      display: inline-block;
+      margin: 0 4px;
+      color: #ee0a24;
+      font-size: 40px;
+    }
+    .block {
+      display: inline-block;
+      width: 50px;
+      color: #ee0a24;
+      text-align: center;
+      background-color: #fff;
+      font-size: 40px;
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163407.vue b/.history/src/views/index/Index_20221011163407.vue
new file mode 100644
index 0000000000000000000000000000000000000000..20c685a60d4c144f5de6d0e5ac1f1de0496126a9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163407.vue
@@ -0,0 +1,244 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .clock{
+
+    }
+  
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163408.vue b/.history/src/views/index/Index_20221011163408.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c3ffd30c5e37183cc9fe6442947128092a30282d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163408.vue
@@ -0,0 +1,257 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    .clock {
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163422.vue b/.history/src/views/index/Index_20221011163422.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e2ce5dbf7852b33c9a299af482e673f52d7db3a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163422.vue
@@ -0,0 +1,258 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    
+    .clock {
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163423.vue b/.history/src/views/index/Index_20221011163423.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dca586bcef146bd2faa3bd29da8518156051a30a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163423.vue
@@ -0,0 +1,258 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    po
+    .clock {
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163425.vue b/.history/src/views/index/Index_20221011163425.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a31068ab8e89cc3a21344fd426a02e71ecb28f0d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163425.vue
@@ -0,0 +1,258 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163428.vue b/.history/src/views/index/Index_20221011163428.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56c8f01e374ad64e4eeaa2259103182d11761c9a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163428.vue
@@ -0,0 +1,259 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      po
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163429.vue b/.history/src/views/index/Index_20221011163429.vue
new file mode 100644
index 0000000000000000000000000000000000000000..27be879a7ca0f73c36d777c0222947ff3a4ecca6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163429.vue
@@ -0,0 +1,259 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: relative;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163431.vue b/.history/src/views/index/Index_20221011163431.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0467e72ac2b78b253af898a85f02e36b27c08302
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163431.vue
@@ -0,0 +1,259 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163439.vue b/.history/src/views/index/Index_20221011163439.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ba93076e3a548d04fb1e87766c8845ec70cbc9a8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163439.vue
@@ -0,0 +1,260 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163443.vue b/.history/src/views/index/Index_20221011163443.vue
new file mode 100644
index 0000000000000000000000000000000000000000..97df120faae7389c0c65443d8dc104178eac6494
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163443.vue
@@ -0,0 +1,260 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      right: 0;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163455.vue b/.history/src/views/index/Index_20221011163455.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6d62304e0da5968067ee155ab7acc0cf5759583
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163455.vue
@@ -0,0 +1,260 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      right: ;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163457.vue b/.history/src/views/index/Index_20221011163457.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b005677b403c7923519f0cac8aa9957c58d3ac1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163457.vue
@@ -0,0 +1,260 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163537.vue b/.history/src/views/index/Index_20221011163537.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f39dd491a3a68ed5aa87c1906a1f392e4b03184
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163537.vue
@@ -0,0 +1,261 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <span></span>
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163542.vue b/.history/src/views/index/Index_20221011163542.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1ee50d5c9e8e7e9682776ab0ff753720ff0696e5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163542.vue
@@ -0,0 +1,261 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <span>xianshimiaos</span>
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163543.vue b/.history/src/views/index/Index_20221011163543.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9998f10bdbdb1e941d0807abdc78e6639c1bdd8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163543.vue
@@ -0,0 +1,261 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        <span>限时秒杀</span>
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163551.vue b/.history/src/views/index/Index_20221011163551.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8eb884efe62fbeaf492a83f75a40d27746333f59
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163551.vue
@@ -0,0 +1,261 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="clock">
+        
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163553.vue b/.history/src/views/index/Index_20221011163553.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d47fd8b78746585e83ae6fb9f524b1f7feea4b1a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163553.vue
@@ -0,0 +1,261 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163613.vue b/.history/src/views/index/Index_20221011163613.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8dcb3fd9c49021e4d978d9874361076f35dbee06
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163613.vue
@@ -0,0 +1,264 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163618.vue b/.history/src/views/index/Index_20221011163618.vue
new file mode 100644
index 0000000000000000000000000000000000000000..09329f56bef0a3e0b795aa5ee30e7375840a2eb4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163618.vue
@@ -0,0 +1,264 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163621.vue b/.history/src/views/index/Index_20221011163621.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06225a18303d241f9cf4a92b987308a67a7ae008
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163621.vue
@@ -0,0 +1,264 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: ;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163623.vue b/.history/src/views/index/Index_20221011163623.vue
new file mode 100644
index 0000000000000000000000000000000000000000..60f019164d628856ba234a74b58d829d842f3a19
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163623.vue
@@ -0,0 +1,264 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163629.vue b/.history/src/views/index/Index_20221011163629.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fbfd8334a7d00e66e0bc66d2034a84a7a2eb2724
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163629.vue
@@ -0,0 +1,265 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: ;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163630.vue b/.history/src/views/index/Index_20221011163630.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3fded151948ff3ea5e33c91b56b1776353e1b1c5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163630.vue
@@ -0,0 +1,265 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163821.vue b/.history/src/views/index/Index_20221011163821.vue
new file mode 100644
index 0000000000000000000000000000000000000000..621a1679e6868a9ffcb170eb6fc11deedacd8325
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163821.vue
@@ -0,0 +1,265 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163925.vue b/.history/src/views/index/Index_20221011163925.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cb94e93144a0e3585e874ad9a096144e0d27f393
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163925.vue
@@ -0,0 +1,266 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163926.vue b/.history/src/views/index/Index_20221011163926.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36be1801d1ede8e3054ed8f801fd4f295fa0beaa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163926.vue
@@ -0,0 +1,266 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      div
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163928.vue b/.history/src/views/index/Index_20221011163928.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90c006f93e0c6179d7ba910d0873b66a1cbe1491
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163928.vue
@@ -0,0 +1,266 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163930.vue b/.history/src/views/index/Index_20221011163930.vue
new file mode 100644
index 0000000000000000000000000000000000000000..30e383682b060d5c98de112132c6f4b017d00394
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163930.vue
@@ -0,0 +1,266 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class=""></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163934.vue b/.history/src/views/index/Index_20221011163934.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ced7425a2ae8faccf7447125645306186e676303
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163934.vue
@@ -0,0 +1,266 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="boxc"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011163935.vue b/.history/src/views/index/Index_20221011163935.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c13c092e3100b4ca2310cd8b6c028eead8c54e7f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011163935.vue
@@ -0,0 +1,266 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span{
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164022.vue b/.history/src/views/index/Index_20221011164022.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a22f28043e297cf401d665867b63b6b0f27965b6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164022.vue
@@ -0,0 +1,266 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164035.vue b/.history/src/views/index/Index_20221011164035.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c0d13eedd0fe435f2ab34379ec5e386783cc50f1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164035.vue
@@ -0,0 +1,267 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164037.vue b/.history/src/views/index/Index_20221011164037.vue
new file mode 100644
index 0000000000000000000000000000000000000000..96a623df6a4275892b62fe2a04afa515f832d560
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164037.vue
@@ -0,0 +1,267 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    box
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164040.vue b/.history/src/views/index/Index_20221011164040.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68f55cfac4fcad95b81ad76c0e1679a72fe31820
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164040.vue
@@ -0,0 +1,267 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164042.vue b/.history/src/views/index/Index_20221011164042.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28907b9d847e4cb1f6fb6d578686d1b605214ac7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164042.vue
@@ -0,0 +1,269 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box{
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164045.vue b/.history/src/views/index/Index_20221011164045.vue
new file mode 100644
index 0000000000000000000000000000000000000000..231a226adb31049991fac67710a7ceb4ab821fbd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164045.vue
@@ -0,0 +1,269 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box{
+      back
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164048.vue b/.history/src/views/index/Index_20221011164048.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3c9c9e761721bfba0001bb023275de8296cf89aa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164048.vue
@@ -0,0 +1,269 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box{
+      background-color: ;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164049.vue b/.history/src/views/index/Index_20221011164049.vue
new file mode 100644
index 0000000000000000000000000000000000000000..20504289299db1aeebc47ec1f750edeb04e6f594
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164049.vue
@@ -0,0 +1,269 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box{
+      background-color: #fff;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164055.vue b/.history/src/views/index/Index_20221011164055.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f9f75c9ae527b43a3545966c0c7797a199576565
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164055.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box{
+      background-color: #fff;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164057.vue b/.history/src/views/index/Index_20221011164057.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6a1ee54f7d3249c16fad91c00822d233a41f1cdc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164057.vue
@@ -0,0 +1,269 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164103.vue b/.history/src/views/index/Index_20221011164103.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6d38d375d86bca81f281b242cc0f886b0e13b5fc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164103.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    dis
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164104.vue b/.history/src/views/index/Index_20221011164104.vue
new file mode 100644
index 0000000000000000000000000000000000000000..15b379024c8f4fdd78f07650d1f0693e4b1d6b52
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164104.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: ;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164106.vue b/.history/src/views/index/Index_20221011164106.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24a5bcd550e123965a85b4dd4ca05459e634cffa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164106.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164113.vue b/.history/src/views/index/Index_20221011164113.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8300e5394f7df531833dd83fbf8cf56fd68b78ed
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164113.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      f
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164116.vue b/.history/src/views/index/Index_20221011164116.vue
new file mode 100644
index 0000000000000000000000000000000000000000..745506e50a943f4426452ba9c5e948f96e4ec31b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164116.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164126.vue b/.history/src/views/index/Index_20221011164126.vue
new file mode 100644
index 0000000000000000000000000000000000000000..72d11b0ec850ed88697e553d277226d3bba3cb5b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164126.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      flex: 1;
+      mar
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164130.vue b/.history/src/views/index/Index_20221011164130.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43e63e409cf288aa2318c25afdeaffd73929b764
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164130.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      flex: 1;
+      margin-top: 30px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164135.vue b/.history/src/views/index/Index_20221011164135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f20326e4885e43401f218095134ff7b094bcbff
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164135.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      flex: 1;
+      margin-top: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164139.vue b/.history/src/views/index/Index_20221011164139.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5f7e47f78c3955dc4526eec158220cad71905a1d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164139.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      flex: 1;
+      margin-top: px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164140.vue b/.history/src/views/index/Index_20221011164140.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4de57fc3255f8bce2e8be0973faeb53fe0aa4e20
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164140.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      flex: 1;
+      margin-top: 60px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164217.vue b/.history/src/views/index/Index_20221011164217.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43233ca0a0713ea60aef48e87b84a129aa0c9bfd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164217.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      flex: 1;
+      margin-top: 67px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164219.vue b/.history/src/views/index/Index_20221011164219.vue
new file mode 100644
index 0000000000000000000000000000000000000000..24c5f60478a80b403d1033f437bfcf902892a811
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164219.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #fff;
+      flex: 1;
+      margin-top: 70px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164319.vue b/.history/src/views/index/Index_20221011164319.vue
new file mode 100644
index 0000000000000000000000000000000000000000..818278897abccd1d0a5b7aa305bf7edf7e4b3599
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164319.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: #blue;
+      flex: 1;
+      margin-top: 70px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164322.vue b/.history/src/views/index/Index_20221011164322.vue
new file mode 100644
index 0000000000000000000000000000000000000000..513ce0e71f21c5aa8a16b8d2d6b029ca6467caa0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164322.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <div class="box"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: blue;
+      flex: 1;
+      margin-top: 70px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164505.vue b/.history/src/views/index/Index_20221011164505.vue
new file mode 100644
index 0000000000000000000000000000000000000000..40f3e22f19d2129600c58fc2c90980538d0dc227
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164505.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <img src="" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .box {
+      background-color: blue;
+      flex: 1;
+      margin-top: 70px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164525.vue b/.history/src/views/index/Index_20221011164525.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42da519c8c81c16428cebe0750f5fa7a0635f078
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164525.vue
@@ -0,0 +1,267 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+      <img src="" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164536.vue b/.history/src/views/index/Index_20221011164536.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef9e68ba3341f9dfaac1adeb316964d6b597f9cd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164536.vue
@@ -0,0 +1,267 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164618.vue b/.history/src/views/index/Index_20221011164618.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46b186dff6424b3887db3c32d4edc62172ebda2f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164618.vue
@@ -0,0 +1,268 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  }
+  
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164621.vue b/.history/src/views/index/Index_20221011164621.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7af03afb41fc9d81950282dada6336fd42df9cde
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164621.vue
@@ -0,0 +1,269 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164625.vue b/.history/src/views/index/Index_20221011164625.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f01d29dd75e3f8e6156b66a3831a896cb444a0d0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164625.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164708.vue b/.history/src/views/index/Index_20221011164708.vue
new file mode 100644
index 0000000000000000000000000000000000000000..692e8141bfb0eeeb61e12877c2c0c4b0bf9ffebd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164708.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 25px;
+        font-weight: 800;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164720.vue b/.history/src/views/index/Index_20221011164720.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0389cc9efbd17b3846298bc5f0dc7aff2f670914
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164720.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 25px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164803.vue b/.history/src/views/index/Index_20221011164803.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b28362760cae8db2312d680e4a8de5408b4a894b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164803.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164804.vue b/.history/src/views/index/Index_20221011164804.vue
new file mode 100644
index 0000000000000000000000000000000000000000..569b2e0d5099a30f999d941cc513cf6c922a3f8c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164804.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164809.vue b/.history/src/views/index/Index_20221011164809.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b28362760cae8db2312d680e4a8de5408b4a894b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164809.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164811.vue b/.history/src/views/index/Index_20221011164811.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e99d6e3e1d6b28635aa0a6fdd400b441944eeeb4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164811.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164819.vue b/.history/src/views/index/Index_20221011164819.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c4a7ffd373610c945a7fb11fc2e3b368db935275
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164819.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011164821.vue b/.history/src/views/index/Index_20221011164821.vue
new file mode 100644
index 0000000000000000000000000000000000000000..219bc5848c759468eb8e378c098849300ac5dbe6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011164821.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172251.vue b/.history/src/views/index/Index_20221011172251.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8a4a103acb5103c65534416c35b5b16e70fa1224
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172251.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172256.vue b/.history/src/views/index/Index_20221011172256.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2c6c432abd16119c3711e099ad85dec1bbd20a2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172256.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      wid
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172258.vue b/.history/src/views/index/Index_20221011172258.vue
new file mode 100644
index 0000000000000000000000000000000000000000..518d1ad26029d492d6e42d7c43cb1b9df8789167
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172258.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: ;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172300.vue b/.history/src/views/index/Index_20221011172300.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d8ccea9c0b18d14a2e2a7c3850bad3e4d64d0e0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172300.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172302.vue b/.history/src/views/index/Index_20221011172302.vue
new file mode 100644
index 0000000000000000000000000000000000000000..31527e23bb2e24b46c02fd58e3ee96e8c6754ca8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172302.vue
@@ -0,0 +1,270 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172304.vue b/.history/src/views/index/Index_20221011172304.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6712a95af099888b83a6e4b3aa54161fa8d024aa
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172304.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172309.vue b/.history/src/views/index/Index_20221011172309.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06bfaa71f1dacb92455a3f0ca80a8b9f1030e53e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172309.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      mar
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172314.vue b/.history/src/views/index/Index_20221011172314.vue
new file mode 100644
index 0000000000000000000000000000000000000000..365c148d58ea46e6acede7124c5ef9bcf4d8d1cd
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172314.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172319.vue b/.history/src/views/index/Index_20221011172319.vue
new file mode 100644
index 0000000000000000000000000000000000000000..31f59926aff4d5a339b7ededfaa7345a8b8043c4
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172319.vue
@@ -0,0 +1,271 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172402.vue b/.history/src/views/index/Index_20221011172402.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d8fb99d437f52dcd1c4e3f7b1d34270a97925d2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172402.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: ;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172405.vue b/.history/src/views/index/Index_20221011172405.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42ea50d5ec8c23a5727349ef4d678f39f06ed2ce
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172405.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172430.vue b/.history/src/views/index/Index_20221011172430.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e57737417ccab6e613ebec0387290f24d3a369a2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172430.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172434.vue b/.history/src/views/index/Index_20221011172434.vue
new file mode 100644
index 0000000000000000000000000000000000000000..31d8a5bcdfdfc1c723994975a33e200ba336141a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172434.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 350px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172533.vue b/.history/src/views/index/Index_20221011172533.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42ea50d5ec8c23a5727349ef4d678f39f06ed2ce
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172533.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172602.vue b/.history/src/views/index/Index_20221011172602.vue
new file mode 100644
index 0000000000000000000000000000000000000000..421623411e2527c99e0a28228c55eb526c351cdc
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172602.vue
@@ -0,0 +1,273 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      dis
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172603.vue b/.history/src/views/index/Index_20221011172603.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a3946f2daf45a8566723c72a05996b597050a3c0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172603.vue
@@ -0,0 +1,273 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: ;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172605.vue b/.history/src/views/index/Index_20221011172605.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb6f8b205052c5e1de544c372462de30a7d56b91
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172605.vue
@@ -0,0 +1,273 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172627.vue b/.history/src/views/index/Index_20221011172627.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ab08ce1446d5d6765a93980032c2a3ead335524
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172627.vue
@@ -0,0 +1,273 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div>限时秒杀</div>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172632.vue b/.history/src/views/index/Index_20221011172632.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb6f8b205052c5e1de544c372462de30a7d56b91
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172632.vue
@@ -0,0 +1,273 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <span class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </span>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172640.vue b/.history/src/views/index/Index_20221011172640.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d22bf4a1d5e4e7c919ccf9c2fcd69337b170177
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172640.vue
@@ -0,0 +1,273 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172658.vue b/.history/src/views/index/Index_20221011172658.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50eeb9d6b56bfd59c39ac19a2fa1ecb1e27b5a92
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172658.vue
@@ -0,0 +1,274 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title"></div>
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172659.vue b/.history/src/views/index/Index_20221011172659.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2146ee85426a093643bf8a742bb1bc3a4389de2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172659.vue
@@ -0,0 +1,276 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        
+      </div>
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+       <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172716.vue b/.history/src/views/index/Index_20221011172716.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75fc551e57b5046d2a0adc8975752d70b0e8f23c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172716.vue
@@ -0,0 +1,275 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+
+      </div>
+      <span>限时秒杀</span>
+      <div class="clock">
+        <van-count-down :time="time">
+          <template #default="timeData">
+            <span class="block">{{ timeData.hours }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.minutes }}</span>
+            <span class="colon">:</span>
+            <span class="block">{{ timeData.seconds }}</span>
+          </template>
+        </van-count-down>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172719.vue b/.history/src/views/index/Index_20221011172719.vue
new file mode 100644
index 0000000000000000000000000000000000000000..55b453217a88ecf9b982bc321e8072d38c7a6ba5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172719.vue
@@ -0,0 +1,264 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img{
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172722.vue b/.history/src/views/index/Index_20221011172722.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7065cf28188fff36e97cdb6778cb1de1a0201e65
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172722.vue
@@ -0,0 +1,273 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <div class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172734.vue b/.history/src/views/index/Index_20221011172734.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd485311c3cc934894ec08850448d7373faf3c15
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172734.vue
@@ -0,0 +1,273 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+      display: block;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172744.vue b/.history/src/views/index/Index_20221011172744.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a7fab7275895685d4277c1c873b6a6e3a791dd5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172744.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172757.vue b/.history/src/views/index/Index_20221011172757.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1a74af38e23f4b087562122ee4a29059b0065106
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172757.vue
@@ -0,0 +1,275 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        i
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172758.vue b/.history/src/views/index/Index_20221011172758.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6d51de17cfa917a854e69a3c390704286aa64e44
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172758.vue
@@ -0,0 +1,275 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172809.vue b/.history/src/views/index/Index_20221011172809.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1b04307bd8a158622b20c35d1b1d04a69f9d9f37
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172809.vue
@@ -0,0 +1,275 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172837.vue b/.history/src/views/index/Index_20221011172837.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ce114381ff433994310d53f81cc4905fd78b77a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172837.vue
@@ -0,0 +1,276 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172840.vue b/.history/src/views/index/Index_20221011172840.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2cd6469b7f1debbc34027bde53f7d64a38472e5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172840.vue
@@ -0,0 +1,276 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: ;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172842.vue b/.history/src/views/index/Index_20221011172842.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ece29a0e7fbc432f30bfb5e23dbcf2faa0d81f8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172842.vue
@@ -0,0 +1,276 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      width: 100%;
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011172854.vue b/.history/src/views/index/Index_20221011172854.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c9efa6454da6307a64d889bce29850ee3a8ed12
--- /dev/null
+++ b/.history/src/views/index/Index_20221011172854.vue
@@ -0,0 +1,275 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    img {
+      margin-top: 70px;
+      height: 50px;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173035.vue b/.history/src/views/index/Index_20221011173035.vue
new file mode 100644
index 0000000000000000000000000000000000000000..52e929f976bc10d985f3adf678c1f6fd0ab94c2f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173035.vue
@@ -0,0 +1,272 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  .content
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173036.vue b/.history/src/views/index/Index_20221011173036.vue
new file mode 100644
index 0000000000000000000000000000000000000000..deb35ab404a4df6d6c2a8599e0a16f40123cd2e7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173036.vue
@@ -0,0 +1,274 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  .content{
+    
+  }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173039.vue b/.history/src/views/index/Index_20221011173039.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2fea4c0b867ca00231658410acff9dc9f2743d5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173039.vue
@@ -0,0 +1,274 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+  .content{
+    flex: 1;
+  }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173040.vue b/.history/src/views/index/Index_20221011173040.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ecb2bd517c3f7a989fbe1a77518b1dc03401115e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173040.vue
@@ -0,0 +1,274 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173101.vue b/.history/src/views/index/Index_20221011173101.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d4e71b533d3fc78e483aed861d5fc34a7d2f0a9e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173101.vue
@@ -0,0 +1,275 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173104.vue b/.history/src/views/index/Index_20221011173104.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a9035749e7e756fb1e51071998a342317e196f71
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173104.vue
@@ -0,0 +1,277 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173106.vue b/.history/src/views/index/Index_20221011173106.vue
new file mode 100644
index 0000000000000000000000000000000000000000..33465d9cab8658cde8021a25680ae05c10986262
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173106.vue
@@ -0,0 +1,277 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        wid
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173108.vue b/.history/src/views/index/Index_20221011173108.vue
new file mode 100644
index 0000000000000000000000000000000000000000..20f3a4bfd42d65b8d45070d24b0081079b18e3a1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173108.vue
@@ -0,0 +1,277 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: ;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173110.vue b/.history/src/views/index/Index_20221011173110.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4dd025291c862dce5e51d9b92c389cc9330681a0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173110.vue
@@ -0,0 +1,277 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173118.vue b/.history/src/views/index/Index_20221011173118.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db7b6a5790e9be53743821d56bc7463ca5de821d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173118.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 100;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173120.vue b/.history/src/views/index/Index_20221011173120.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1b06f5b1b832a894774d56fbc62eb073ef22a184
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173120.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173135.vue b/.history/src/views/index/Index_20221011173135.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95c5e9e36cfb180a060ffe7855158e39947e99f1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173135.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173150.vue b/.history/src/views/index/Index_20221011173150.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1a8b251af08d7bd50faa42224d70d3083e224529
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173150.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 30px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173312.vue b/.history/src/views/index/Index_20221011173312.vue
new file mode 100644
index 0000000000000000000000000000000000000000..097e49c227f7f56c90465ce67b66d337e7a672c7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173312.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173318.vue b/.history/src/views/index/Index_20221011173318.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f1068ba6cad731cbcfea66d79c8802992b7329e6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173318.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜咩
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173325.vue b/.history/src/views/index/Index_20221011173325.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71be27e4a83a544b1829079993ef7d82acfb8253
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173325.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173343.vue b/.history/src/views/index/Index_20221011173343.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c0b00af956fdfd555cc77eba16e410236dc6024
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173343.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          span 小喜
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173346.vue b/.history/src/views/index/Index_20221011173346.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9972562d3fd0d9f95010e8481f9795a6175164c2
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173346.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <span></span> 小喜
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173349.vue b/.history/src/views/index/Index_20221011173349.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b137da48419ba2d9d16671a07685c9c2346859a5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173349.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <span></span> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img{
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173350.vue b/.history/src/views/index/Index_20221011173350.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f1ac3e33a3c9b579021eef6f749737b2e891dd3
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173350.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <span>小喜</span>
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173359.vue b/.history/src/views/index/Index_20221011173359.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b4ddc71d5f08aafaa20a623c43f4a201b3520e70
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173359.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <>小喜
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173401.vue b/.history/src/views/index/Index_20221011173401.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b63d58ba4dc1725146ba05aa17adf3ed6a9c1407
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173401.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          小喜
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173403.vue b/.history/src/views/index/Index_20221011173403.vue
new file mode 100644
index 0000000000000000000000000000000000000000..692797ada76fc75ba3fdf98d14ee390eac71359f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173403.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          p 小喜
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173406.vue b/.history/src/views/index/Index_20221011173406.vue
new file mode 100644
index 0000000000000000000000000000000000000000..62994bd0365e9be9077bdd2178156c90d1636dd1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173406.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p></p> 小喜
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173408.vue b/.history/src/views/index/Index_20221011173408.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fcd0ff5147cb89487ed066481311698ce0877b66
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173408.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p></p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173410.vue b/.history/src/views/index/Index_20221011173410.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d1a0691045701cb0ed80fc4c631178f6e0cffd8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173410.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 20px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173421.vue b/.history/src/views/index/Index_20221011173421.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0b3335f6fda5eaf3059f888d64c81077c97fbe35
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173421.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 28px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173424.vue b/.history/src/views/index/Index_20221011173424.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e9b1b388168c4deda4cd6124d7e126b22380c592
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173424.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173425.vue b/.history/src/views/index/Index_20221011173425.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d67a11eb6ce5897139e1f6ead3a8c70cdf69c1d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173425.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 1px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173427.vue b/.history/src/views/index/Index_20221011173427.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6176f808f354a4d4132798a5b916194aac4c2aa9
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173427.vue
@@ -0,0 +1,278 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        font-size: 18px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173444.vue b/.history/src/views/index/Index_20221011173444.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c594d5b25857567d6d08bae0d3e7d5ad5d36be1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173444.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        
+        font-size: 18px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173445.vue b/.history/src/views/index/Index_20221011173445.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e46bf13126a23748695c8e0aab5dcd2f0b0dff00
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173445.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        wid
+        font-size: 18px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173447.vue b/.history/src/views/index/Index_20221011173447.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbb9e67b121beb6a010acf2047da15317aad2f02
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173447.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: ;
+        font-size: 18px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173449.vue b/.history/src/views/index/Index_20221011173449.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9122ec1fdc476c18ad59538e2e927880cc074c58
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173449.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 30px;
+        font-size: 18px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173454.vue b/.history/src/views/index/Index_20221011173454.vue
new file mode 100644
index 0000000000000000000000000000000000000000..54d9b040ef042342bfe07757aa09d28c1c256fe1
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173454.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 50px;
+        font-size: 18px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173501.vue b/.history/src/views/index/Index_20221011173501.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2ceaa00fa06d83a3144b4fb9baf11d930349538d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173501.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 50px;
+        font-size: px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173505.vue b/.history/src/views/index/Index_20221011173505.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b90a41ce69d7283b80917ef2bd4c8705cbc36d93
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173505.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 50px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173510.vue b/.history/src/views/index/Index_20221011173510.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8e323e69977f84d52cba9697bc40730e1a047778
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173510.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 50px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173529.vue b/.history/src/views/index/Index_20221011173529.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d696dda3e399541027c40d58cee057221a4e94f6
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173529.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 30px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173534.vue b/.history/src/views/index/Index_20221011173534.vue
new file mode 100644
index 0000000000000000000000000000000000000000..485d599d3edcc6d3968c8d079096642652602524
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173534.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 0px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173539.vue b/.history/src/views/index/Index_20221011173539.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aead2a122af190e5edde189499a8dd4b9c69c201
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173539.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 10px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173546.vue b/.history/src/views/index/Index_20221011173546.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aeff971c5b7cd39e2126087675550793cc573ba5
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173546.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173552.vue b/.history/src/views/index/Index_20221011173552.vue
new file mode 100644
index 0000000000000000000000000000000000000000..006f5348f49630702caa1c9044d0ebd4f6f3eb29
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173552.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 30px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173557.vue b/.history/src/views/index/Index_20221011173557.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d49680d5acde76ace8d5acd89bfbd54d64191c44
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173557.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173600.vue b/.history/src/views/index/Index_20221011173600.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9208312afb354cdd1b43ef883fd192841109f638
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173600.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 2px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173601.vue b/.history/src/views/index/Index_20221011173601.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c1c915c2ef5366c97fb0ac3df7be0069332c6d7a
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173601.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 22px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173605.vue b/.history/src/views/index/Index_20221011173605.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f9e43d86ebe21c507f89d6bb3692345853f0aa45
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173605.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 24px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173609.vue b/.history/src/views/index/Index_20221011173609.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d49680d5acde76ace8d5acd89bfbd54d64191c44
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173609.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173618.vue b/.history/src/views/index/Index_20221011173618.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d6d035cc0035db848209a318177e3e52448a42c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173618.vue
@@ -0,0 +1,279 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173629.vue b/.history/src/views/index/Index_20221011173629.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf1e6477909264869145b8b991a66f1011d3049d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173629.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          wid
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173631.vue b/.history/src/views/index/Index_20221011173631.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7abd292e1f9a5d0dd853b9549bbb39f7f6d426de
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173631.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: ;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173633.vue b/.history/src/views/index/Index_20221011173633.vue
new file mode 100644
index 0000000000000000000000000000000000000000..149eae34b2cd170ba31019241c833aab374c764f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173633.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 50px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173640.vue b/.history/src/views/index/Index_20221011173640.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43aa64bdab9745a8127d9cd5b679ed8de437474e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173640.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 100px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173649.vue b/.history/src/views/index/Index_20221011173649.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5cd33ed96402e4d377f812c413e524f02831a6d8
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173649.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173657.vue b/.history/src/views/index/Index_20221011173657.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9e9a1ae3c3b30195d0764ff644f69e1534bf1bac
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173657.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 30px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173710.vue b/.history/src/views/index/Index_20221011173710.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be20f17a9d3967dbbd6ecce739ecda13c63827e0
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173710.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 40px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173717.vue b/.history/src/views/index/Index_20221011173717.vue
new file mode 100644
index 0000000000000000000000000000000000000000..161f2ff53db787e581e6a9ad8be082d9cbbbae04
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173717.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173732.vue b/.history/src/views/index/Index_20221011173732.vue
new file mode 100644
index 0000000000000000000000000000000000000000..65188f190347c62caac511996779056a69e20779
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173732.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          mar
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173735.vue b/.history/src/views/index/Index_20221011173735.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3773f6a360aab138019f792c2f140428d29bd5e7
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173735.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: ;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173737.vue b/.history/src/views/index/Index_20221011173737.vue
new file mode 100644
index 0000000000000000000000000000000000000000..289187ebbe40af59ec73dc2699c1381d2611282f
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173737.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 30px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173746.vue b/.history/src/views/index/Index_20221011173746.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f36c9423fc7efdad044bd803c02ec1fdf56cd87e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173746.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 0px;
+        25
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173750.vue b/.history/src/views/index/Index_20221011173750.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a0ff0be70bf9243ade41511558a387647e71a3d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173750.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173813.vue b/.history/src/views/index/Index_20221011173813.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5a2493f91f5cc9275f0bf2549da3a630e1f89c4c
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173813.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173818.vue b/.history/src/views/index/Index_20221011173818.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a0ff0be70bf9243ade41511558a387647e71a3d
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173818.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="3000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173836.vue b/.history/src/views/index/Index_20221011173836.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c4f749f7a4ec88d86215cb18c068644172bd1c1e
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173836.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/13.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173852.vue b/.history/src/views/index/Index_20221011173852.vue
new file mode 100644
index 0000000000000000000000000000000000000000..08d958c7af0ebe58a5c63643528957821f8c9710
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173852.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/12.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173902.vue b/.history/src/views/index/Index_20221011173902.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5c3b012b0fd937f3c12adcc4d7e38517fecd529
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173902.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173906.vue b/.history/src/views/index/Index_20221011173906.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f8fb25ffd76ea886cb97cd17ff7bfb666b21d7b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173906.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/1.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011173908.vue b/.history/src/views/index/Index_20221011173908.vue
new file mode 100644
index 0000000000000000000000000000000000000000..97dd4707012c31f42b515f0392908c5afd381885
--- /dev/null
+++ b/.history/src/views/index/Index_20221011173908.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011174455.vue b/.history/src/views/index/Index_20221011174455.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ca69c577ea368d73c31f7b7a97fa69161f394546
--- /dev/null
+++ b/.history/src/views/index/Index_20221011174455.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011174500.vue b/.history/src/views/index/Index_20221011174500.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d694120a1cfc9a70677bf6176442cca6c00c912b
--- /dev/null
+++ b/.history/src/views/index/Index_20221011174500.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="x_xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011174508.vue b/.history/src/views/index/Index_20221011174508.vue
new file mode 100644
index 0000000000000000000000000000000000000000..40ce6760b902f9832e12d2dd984dd4c25b281828
--- /dev/null
+++ b/.history/src/views/index/Index_20221011174508.vue
@@ -0,0 +1,281 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="x_xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p> 
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .x_xiaoxi {
+    width: 700px;
+    height: 155px;
+    // background-color: yellow;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/index/Index_20221011174541.vue b/.history/src/views/index/Index_20221011174541.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e1e1284c4a1b300d86b4b88ca889e190db0a534
--- /dev/null
+++ b/.history/src/views/index/Index_20221011174541.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="x_xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p>
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .x_xiaoxi {
+    width: 700px;
+    height: 155px;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/assets/imgs/11.png b/src/assets/imgs/11.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b9bb712eeee26629cd02f0838d19116b7e567f4
Binary files /dev/null and b/src/assets/imgs/11.png differ
diff --git a/src/assets/imgs/12.png b/src/assets/imgs/12.png
new file mode 100644
index 0000000000000000000000000000000000000000..a23bf2abaaf172aa639d4ef739a7c92a8e31583a
Binary files /dev/null and b/src/assets/imgs/12.png differ
diff --git a/src/assets/imgs/13.png b/src/assets/imgs/13.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6ef5563c079e246274458cf649d3d2ccd622da8
Binary files /dev/null and b/src/assets/imgs/13.png differ
diff --git a/src/assets/imgs/14.png b/src/assets/imgs/14.png
new file mode 100644
index 0000000000000000000000000000000000000000..f67e59d1e5fa88eeef79de801fb2e966caa206ea
Binary files /dev/null and b/src/assets/imgs/14.png differ
diff --git a/src/assets/imgs/15.gif b/src/assets/imgs/15.gif
new file mode 100644
index 0000000000000000000000000000000000000000..178eae6e5a35ffb694f7ac27584ee859c9fd5602
Binary files /dev/null and b/src/assets/imgs/15.gif differ
diff --git a/src/views/index/shouye1.vue b/src/views/index/shouye1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0e1e1284c4a1b300d86b4b88ca889e190db0a534
--- /dev/null
+++ b/src/views/index/shouye1.vue
@@ -0,0 +1,280 @@
+<!-- eslint-disable vue/valid-v-bind -->
+<template>
+  <div class="all">
+    <div class="h_header">
+      <span>
+        <van-icon name="location-o" class="location" size="20" />
+        深圳市
+      </span>
+    </div>
+    <div class="banner">
+      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe-item>
+          <img src="../.././assets/imgs/11.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/12.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/13.png" alt="" />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="../.././assets/imgs/14.png" alt="" />
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="nav">
+      <van-swipe class="my-swipe" indicator-color="black" :autoplay="4000">
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/1.png" alt="" />
+              <p>家庭保洁</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+        <van-swipe-item>
+          <ul v-for="(item, i) in ulList" :key="i">
+            <li v-for="(item, i) in dataList" :key="i">
+              <img src="../.././assets/imgs/2.png" alt="" />
+              <p>超级保姆</p>
+            </li>
+          </ul>
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <div class="pic">
+      <img src="../.././assets/imgs/12.png" alt="" />
+    </div>
+    <div class="lala">
+      <div class="left">
+        <img src="../.././assets/imgs/14.png" alt="" />
+      </div>
+      <div class="right">
+        <img src="../.././assets/imgs/11.png" alt="" />
+      </div>
+    </div>
+    <div class="x_xiaoxi">
+      <ul>
+        <li>
+          <p>小喜</p>
+          <span>叮咚</span>
+        </li>
+        <li>
+          小喜提醒您
+          <p>深圳市已经有1954315已成功预约清洗服务！</p>
+        </li>
+        <li>
+          <button>去看看>></button>
+        </li>
+      </ul>
+    </div>
+    <div class="count_down">
+      <div class="title">
+        <span>限时秒杀</span>
+        <span class="clock">
+          <van-count-down :time="time">
+            <template #default="timeData">
+              <span class="block">{{ timeData.hours }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.minutes }}</span>
+              <span class="colon">:</span>
+              <span class="block">{{ timeData.seconds }}</span>
+            </template>
+          </van-count-down>
+        </span>
+      </div>
+      <div class="content">
+        <img src="../.././assets/imgs/13.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataList: 5,
+      ulList: 2,
+      time: 30 * 60 * 60 * 1000,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.all {
+  .h_header {
+    background-color: rgb(220, 230, 255);
+    width: 100%;
+    height: 245px;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    span {
+      font-size: 30px;
+      margin-left: 24px;
+      .location {
+        margin-top: 26px;
+        margin-right: 20px;
+      }
+    }
+  }
+  // 轮播图
+  .banner {
+    width: 700px;
+    height: 260px;
+    top: 95px;
+    position: absolute;
+    margin-left: 24px;
+    img {
+      height: 260px;
+      width: 100%;
+    }
+  }
+  .nav {
+    width: 700px;
+    height: 358px;
+    background-color: rgb(150, 173, 231);
+    margin: 149px 24px 0 24px;
+    .my-swipe {
+      height: 358px;
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      // background-color: #39a9ed;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+        li {
+          img {
+            width: 90px;
+            height: 90px;
+          }
+        }
+      }
+    }
+  }
+  .pic {
+    width: 700px;
+    height: 406px;
+    margin-left: 24px;
+    margin-top: 38px;
+    img {
+      width: 100%;
+      height: 406px;
+    }
+  }
+  .lala {
+    width: 700px;
+    height: 326px;
+    background-color: red;
+    display: flex;
+    margin-left: 24px;
+    margin-top: 30px;
+    .left {
+      width: 177px;
+      height: 326px;
+      background-color: skyblue;
+      img {
+        width: 177px;
+        height: 326px;
+      }
+    }
+    .right {
+      flex: 1;
+      background-color: aquamarine;
+      img {
+        width: 523px;
+        height: 326px;
+      }
+    }
+  }
+  .x_xiaoxi {
+    width: 700px;
+    height: 155px;
+    margin-top: 50px;
+    margin-left: 24px;
+    ul {
+      display: flex;
+      li:nth-of-type(1) {
+        width: 70px;
+        font-size: 30px;
+        font-weight: 600;
+        margin-right: 25px;
+        span {
+          display: block;
+          background-color: orange;
+          text-align: center;
+          border-radius: 30px;
+          margin-top: 25px;
+        }
+      }
+      li:nth-of-type(2) {
+        color: orange;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
+        p {
+          margin-top: 20px;
+          color: rgb(136, 136, 136);
+        }
+      }
+      li:nth-of-type(3) {
+        button {
+          width: 120px;
+          background-color: red;
+          border-radius: 30px;
+          color: #fff;
+          margin-left: 20px;
+          margin-top: 50px;
+          font-size: 25px;
+        }
+      }
+    }
+  }
+  .count_down {
+    width: 700px;
+    height: 448px;
+    background-color: orange;
+    border-radius: 30px;
+    margin-left: 24px;
+    padding: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    span {
+      font-size: 50px;
+      color: #fff;
+    }
+    .clock {
+      position: absolute;
+      right: 20px;
+      .colon {
+        display: inline-block;
+        margin: 0 4px;
+        color: #ee0a24;
+        font-size: 40px;
+      }
+      .block {
+        display: inline-block;
+        width: 50px;
+        color: #ee0a24;
+        text-align: center;
+        background-color: #fff;
+        font-size: 40px;
+        font-weight: 400;
+      }
+    }
+    .content {
+      flex: 1;
+      img {
+        width: 100%;
+        height: 350px;
+      }
+    }
+  }
+}
+</style>