wip: 4.0

src/pages/index/index.scss

@@ -0,0 +1,126 @@
+page {
+  background-image: url("//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png");
+  background-size: 100% 57%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+}
+
+.local {
+  margin-left: 15px;
+  display: flex;
+  align-items: flex-end;
+  color: #fff;
+
+  text {
+    font-size: 25px;
+  }
+}
+
+.search {
+  margin: 30px auto;
+  display: flex;
+  border-radius: 18px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background: rgba(255, 255, 255, 0.8);
+  width: 730px;
+
+  input {
+    flex: 1;
+  }
+
+  .search-btn {
+    background-color: #f83d3d;
+    color: #fff;
+    border-radius: 10px;
+    width: 100px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+  }
+}
+
+.banner {
+  .title {
+    background-image: url("//p0.meituan.net/csc/542112fc072d4687b437848bc29b0a1730495.png");
+    background-size: 100% 100%;
+    width: 600px;
+    height: 90px;
+    margin: auto;
+  }
+
+  .jf-btn {
+    margin: 15px auto;
+    background-image: url("//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png");
+    background-size: 100% 100%;
+    width: 350px;
+    height: 70px;
+  }
+
+  .footer {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin: 0 auto;
+    padding: 0 15px;
+
+    .btn-1 {
+      background-image: url("//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png");
+      background-size: 100% 100%;
+      width: 200px;
+      height: 220px;
+    }
+
+    .btn-2 {
+      background-image: url("//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png");
+      background-size: 100% 100%;
+      width: 300px;
+      height: 220px;
+    }
+
+    .btn-3 {
+      background-image: url("//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png");
+      background-size: 100% 100%;
+      width: 200px;
+      height: 220px;
+    }
+  }
+}
+
+.navigation {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  margin: 10px auto;
+  width: 730px;
+  height: auto;
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 20px;
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .icon {
+      background-size: 100% 100%;
+      width: 80px;
+      height: 80px;
+    }
+
+    .text {
+      color: #333333;
+      font-size: 23px;
+      margin-top: 6px;
+    }
+  }
+}
+
+.ad {
+  background-image: url("https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png");
+  background-size: 100% 100%;
+  width: 100%;
+  height: 180px;
+}