feat

src/components/header/index.vue

@@ -16,22 +16,22 @@
                 :show-arrow="true"
                 @select="handleSelect"
               >
-                <div class="s-city">珠海</div>
+                <div class="s-city">Zhuhai</div>
               </n-dropdown>
             </div></template
           >
         </div>
         <div class="nav-right" v-if="route.path == '/'">
           <div class="search-wrapper">
-            <n-input round placeholder="请输入楼盘名" v-model:value="iptVal">
+            <n-input round placeholder="please enter the property name" v-model:value="iptVal">
             </n-input>
           </div>
-          <n-button tertiary round @click="handleSearch">搜索</n-button>
+          <n-button tertiary round @click="handleSearch">Search</n-button>
         </div>
       </div>
       <div v-if="route.path == '/'" class="main-tab">
         <div @click="handleAll" class="tab-item" :class="{ active: !isSearch }">
-          全部楼盘
+          All Properties
         </div>
         <!-- <div class="tab-item">近期楼盘</div>
         <div class="tab-item">优惠楼盘</div> -->
@@ -91,7 +91,7 @@ const handleSelect = (key) => {
 };
 const options = ref([
   {
-    label: "珠海",
+    label: "Zhuhai",
     key: "marina bay sands",
     disabled: true,
   },

src/lang/en.js

@@ -0,0 +1,24 @@
+export default {
+  header: {
+    all: "All Properties",
+    search: "Search",
+    searchPlaceholder: "请输入楼盘名",
+    city: "珠海",
+  },
+  body: {
+    hot: "Popular Properties",
+  },
+
+  footer: {
+    copyright: "版权所有 © 2023 房产管理系统",
+  },
+  details: {
+    tel: "咨询电话",
+    projectAddress: "address",
+    openTime: "最新开盘",
+    cadInfo: "户型介绍",
+    moneyUnit: "元/平(单价) ",
+    totalUnit: "万/套(总价) ",
+    
+  },
+};

src/views/data/data.js

@@ -6,17 +6,23 @@ export const houseData = [
     images_3: ["yb1.jpg", "yb2.jpg", "yb3.jpg", "yb4.jpeg"],
     images_4: ["qw1.jpg"],
     images_5: ["pt1.jpeg", "pt2.jpg", "pt3.jpg"],
-    title: "格力海岸六期",
+    title: "Gree Coast Phase 6",
     vrLink: "https://www.4dkankan.com/spc.html?m=t-VJjZMUl&lang=zh",
-    tags: ["在售", "住宅", "低密住宅"],
-    address: "广东省珠海市香洲区情侣北路",
+    tags: ["For Sale", " Residential", " Low-Density Housing"],
+    address:
+      "North Qinglü Road, Xiangzhou District, Zhuhai, Guangdong Province",
     location: "22.3530,113.5920",
     time: "2021-07-06",
-    cad: "二居室,三居室",
-    agent: "张伟",
-    label: ["公交直达", "公园", "小三房", "小户型"],
-    price: "25000元/㎡",
-    total: "130-275(万/套)",
+    cad: "2-Bedroom Unit,3-Bedroom Unit",
+    agent: "Wei Zhang",
+    label: [
+      "Direct Bus Access",
+      " Park",
+      " Small Three-Bedroom",
+      " Compact Unit",
+    ],
+    price: "RMB 25000/㎡",
+    total: "RMB 130-275 (million/set)",
   },
   {
     id: 2,
@@ -25,17 +31,22 @@ export const houseData = [
     images_3: ["yb1.jpg", "yb2.jpg", "yb3.jpg", "yb4.jpeg"],
     images_4: ["qw1.jpg"],
     images_5: ["pt1.jpeg", "pt2.jpg", "pt3.jpg"],
-    title: "正方深悦湾",
+    title: "Zhengfang Shenyue Bay",
     vrLink: "https://www.4dkankan.com/spc.html?m=t-pnj0IJX&lang=zh",
-    tags: ["在售", "住宅", "低密住宅"],
-    address: "金业南路555号",
+    tags: ["For Sale", " Residential", " Low-Density Housing"],
+    address: "No. 555, Jinye South Road",
     location: "22.2356,113.5412",
     time: "2023-02-23",
-    cad: "二居室,三居室",
-    agent: "李娜",
-    label: ["公交直达", "综合商场", "两房", "小型社区"],
-    price: "24000元/平",
-    total: "170-315(万/套)",
+    cad: "2-Bedroom Unit,3-Bedroom Unit",
+    agent: "Na Li",
+    label: [
+      "Direct Bus Access",
+      " Shopping Mall",
+      " Two-Bedroom",
+      " Small Community",
+    ],
+    price: "RMB 24000/㎡",
+    total: "RMB 170-315 (million/set)",
   },
   {
     id: 3,
@@ -44,17 +55,17 @@ export const houseData = [
     images_3: ["yb1.jpg", "yb2.jpg", "yb3.jpg", "yb4.jpeg"],
     images_4: ["qw1.jpg"],
     images_5: ["pt1.jpeg", "pt2.jpg", "pt3.jpg"],
-    title: "港湾天际",
+    title: "Harbor Horizon",
     vrLink: "https://www.4dkankan.com/spc.html?m=t-kZUcUeX&lang=zh",
-    tags: ["在售", "住宅", "低密住宅"],
-    address: "前湾二路港湾天际",
+    tags: ["For Sale", " Residential", " Low-Density Housing"],
+    address: "Gangwan Horizon, Qianwan 2nd Road",
     location: "22.5218,113.8843",
     time: "2023-03-21",
-    cad: "二居室,三居室",
-    agent: "王磊",
-    label: ["期房", "公园", "两房", "小户型"],
-    price: "25000元/平",
-    total: "115-255(万/套)",
+    cad: "2-Bedroom Unit,3-Bedroom Unit",
+    agent: "Lei Wang",
+    label: ["Off-Plan", " Park", " Two-Bedroom", " Compact Unit"],
+    price: "RMB 25000/㎡",
+    total: "RMB 115-255 (million/set)",
   },
   {
     id: 4,
@@ -63,17 +74,22 @@ export const houseData = [
     images_3: ["yb1.jpg", "yb2.jpg", "yb3.jpg", "yb4.jpeg"],
     images_4: ["qw1.jpg"],
     images_5: ["pt1.jpeg", "pt2.jpg", "pt3.jpg"],
-    title: "仁恒滨海湾一期",
+    title: "Yanheng Coastal Bay Phase 1",
     vrLink: "https://www.4dkankan.com/spc.html?m=t-N4Pdc1B&lang=zh",
-    tags: ["在售", "住宅", "低密住宅"],
-    address: "广东省珠海市香洲区田馆路",
+    tags: ["For Sale", " Residential", " Low-Density Housing"],
+    address: "Tianguan Road, Xiangzhou District, Zhuhai, Guangdong Province",
     location: "22.2914,113.5726",
     time: "2022-04-30",
-    cad: "二居室,三居室",
-    agent: "陈芳",
-    label: ["公交直达", "现房", "两房", "大三居"],
-    price: "25000元/平",
-    total: "150-538(万/套)",
+    cad: "2-Bedroom Unit,3-Bedroom Unit",
+    agent: "Fang Chen",
+    label: [
+      "Direct Bus Access",
+      " Ready-to-Move-In",
+      " Two-Bedroom",
+      " Large Three-Bedroom",
+    ],
+    price: "RMB 25000/㎡",
+    total: "RMB 150-538 (million/set)",
   },
   {
     id: 5,
@@ -82,16 +98,16 @@ export const houseData = [
     images_3: ["yb1.jpg", "yb2.jpg", "yb3.jpg", "yb4.jpeg"],
     images_4: ["qw1.jpg"],
     images_5: ["pt1.jpeg", "pt2.jpg", "pt3.jpg"],
-    title: "港湾新城",
+    title: "Harbor New City",
     vrLink: "https://www.4dkankan.com/spc.html?m=t-N4Pdc1B&lang=zh",
-    tags: ["在售", "住宅", "低密住宅"],
-    address: "圣皇头街港湾新城",
+    tags: ["For Sale", " Residential", " Low-Density Housing"],
+    address: "Shenghuangtou Street, Harbor New City",
     location: "22.2703,113.5768",
     time: "2024-12-30",
-    cad: "二居室,三居室",
-    agent: "赵明",
-    label: ["公交直达", "公园", "两房", "小户型"],
-    price: "16000元/平",
-    total: "130-200(万/套)",
+    cad: "2-Bedroom Unit,3-Bedroom Unit",
+    agent: "Ming Zhao",
+    label: ["Direct Bus Access", " Park", " Two-Bedroom", " Compact Unit"],
+    price: "RMB 16000/㎡",
+    total: "RMB 130-200 (million/set)",
   },
 ];

src/views/details/index.vue

@@ -15,7 +15,7 @@
             </div>
             <!-- <div class="other-name">别名：璟云雅苑</div> -->
           </div>
-          <div class="tel-num">咨询电话: 4008315585转04817</div>
+          <div class="tel-num">Contact details: 4008315585</div>
         </div>
         <div class="details-top">
           <div class="banner-box">
@@ -45,10 +45,8 @@
                 @click="changeBanner(i.type)"
                 v-for="(i, index) in bannerListType"
               >
-                <img
-                  :src="`./static/image/house/${houseInfo.images_1[0]}`"
-                  alt=""
-                /><span class="name"
+                <img :src="`./static/image/house/${i.images[0]}`" alt="" /><span
+                  class="name"
                   >{{ i.name }}（{{ i.images.length }}）</span
                 >
               </div>
@@ -56,13 +54,13 @@
           </div>
           <div class="info-box">
             <div class="top-info">
-              <span class="title">参考均价</span>
+              <span class="title">Reference Average Price</span>
               <!-- <span class="price-number">60000</span> -->
               <!-- <span class="price-unit">元/平(单价) </span> -->
               <span class="price-unit">{{ houseInfo.price }} </span>
               <!-- <span class="price-number">480-765</span> -->
               <!-- <span class="price-unit">(万/套)(总价)</span> -->
-              <span class="total-title">总价</span>
+              <span class="total-title">Total price </span>
               <span class="price-unit">{{ houseInfo.total }} </span>
             </div>
             <div class="info-tag">
@@ -72,15 +70,15 @@
             </div>
             <div class="info-desc">
               <div class="desc-item">
-                <div class="title">项目地址</div>
+                <div class="title">Project Address</div>
                 <div class="text">{{ houseInfo.address }}</div>
               </div>
               <div class="desc-item">
-                <div class="title">最新开盘</div>
+                <div class="title">Project Launch Date</div>
                 <div class="text">{{ houseInfo.time }}</div>
               </div>
               <div class="desc-item">
-                <div class="title">楼盘户型</div>
+                <div class="title">Property layout</div>
                 <div class="text">
                   <span v-for="(i, key, index) in cadData"
                     >{{ key }}({{ i.length }})</span
@@ -93,7 +91,7 @@
         </div>
         <div class="details-bottom">
           <div class="cad-box">
-            <h2 class="title">户型介绍</h2>
+            <h2 class="title">Layout Description</h2>
             <div class="cad-tab">
               <div
                 class="tab-item"
@@ -119,11 +117,11 @@
                   <div class="cad-title">
                     <span> {{ i.desc }} </span>
                     <div class="label-wrap">
-                      <div class="label zs">在售</div>
-                      <div class="label zz">住宅</div>
+                      <!-- <div class="label zs">在售</div>
+                      <div class="label zz">住宅</div> -->
                     </div>
                   </div>
-                  <div class="area">{{ i.area }} （南,北朝向）</div>
+                  <div class="area">{{ i.area }} （South/North Facing）</div>
                   <div class="price">
                     {{ i.price }}
                   </div>
@@ -140,22 +138,22 @@
               </div>
             </div>
             <div class="top-info">
-              <span class="title">参考均价</span>
+              <span class="title">Reference Average Price</span>
               <span class="price-number">{{ houseInfo.price }}</span>
               <!-- <span class="price-unit">元/平(单价) </span> -->
             </div>
 
             <div class="info-desc">
               <div class="desc-item">
-                <div class="title">项目地址</div>
+                <div class="title">Project Address</div>
                 <div class="text">{{ houseInfo.address }}</div>
               </div>
               <div class="desc-item">
-                <div class="title">最新开盘</div>
+                <div class="title">Project Launch Date</div>
                 <div class="text">{{ houseInfo.time }}</div>
               </div>
               <div class="desc-item">
-                <div class="title">楼盘户型</div>
+                <div class="title">Property layout</div>
                 <div class="text">
                   <span v-for="(i, key, index) in cadData"
                     >{{ key }}({{ i.length }})</span
@@ -171,7 +169,7 @@
             api-key="AIzaSyD-nVI43AYI9qp4rsQMJgN6abyPdn3QRY0"
             style="width: 100%; height: 100%"
             :center="center"
-            :zoom="15"
+            :zoom="13"
             language="en-us"
           >
             <Marker :options="{ position: center }" />
@@ -221,22 +219,22 @@ const bannerListType = ref([
   },
   {
     type: 2,
-    name: "效果图",
+    name: "Render",
     images: houseInfo.value.images_2,
   },
   {
     type: 3,
-    name: "样板间",
+    name: "Model",
     images: houseInfo.value.images_3,
   },
   {
     type: 4,
-    name: "区位",
+    name: "Location",
     images: houseInfo.value.images_4,
   },
   {
     type: 5,
-    name: "小区配套",
+    name: "Facilities",
     images: houseInfo.value.images_5,
   },
 ]);
@@ -246,48 +244,49 @@ const banner = ref(
 const bannerList = ref(houseInfo.value.images_1);
 // https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg
 
-const activeCad = ref("二居室");
+const activeCad = ref("2-Bedroom Unit");
 const cadData = ref({
-  二居室: [
+  "2-Bedroom Unit": [
     {
-      title: "二居室",
-      area: "建面 76m²",
-      desc: "2室2厅1卫",
-      price: "190 万/套(参考价格）",
+      title: "2-Bedroom Unit",
+      area: "Construction area 76m²",
+      desc: "2 bedrooms, 2 living rooms, 1 bathroom",
+      price: "1.9 million/set (reference price)",
       thumb: "76二.jpg",
     },
     {
-      title: "二居室",
-      area: "建面 71m²",
-      desc: "2室2厅1卫",
-      price: "190 万/套(参考价格）",
+      title: "2-Bedroom Unit",
+      area: "Construction area 71m²",
+      desc: "2 bedrooms, 2 living rooms, 1 bathroom",
+      price: "1.9 million/set (reference price)",
       thumb: "71二.jpg",
     },
   ],
-  三居室: [
+  "3-Bedroom Unit": [
     {
-      title: "三居室",
-      area: "建面 96m²",
-      desc: "3室2厅2卫",
-      price: "270 万/套(参考价格）",
+      title: "3-Bedroom Unit",
+      area: "Construction area 96m²",
+      desc: "3 bedrooms, 2 living rooms, 1 bathroom",
+      price: "2.7 million/set (reference price)",
       thumb: "96三.jpg",
     },
     {
-      title: "三居室",
-      area: "建面 97m²",
-      desc: "3室2厅2卫",
+      title: "3-Bedroom Unit",
+      area: "Construction area 106m²",
+      desc: "2.75 million/set (reference price)",
       price: "270 万/套(参考价格）",
-      thumb: "97三.jpg",
+      thumb: "106三.jpg",
     },
     {
-      title: "三居室",
-      area: "建面 106m²",
-      desc: "3室2厅2卫",
-      price: "275 万/套(参考价格）",
-      thumb: "106三.jpg",
+      title: "3-Bedroom Unit",
+      area: "Construction area 97m²",
+      desc: "3 bedrooms, 2 living rooms, 2 bathrooms",
+      price: "2.7 million/set (reference price)",
+      thumb: "96三.jpg",
     },
   ],
 });
+
 const changeBanner = (type) => {
   bannerActiveIndex.value = type;
   bannerList.value = bannerListType.value.find(
@@ -379,6 +378,9 @@ onMounted(() => {
     }
   }
 }
+.details {
+  // word-break: break-all;
+}
 .content {
   width: 1182px;
   margin: 0 auto;
@@ -485,7 +487,6 @@ onMounted(() => {
           // margin-right: 6px;
           display: inline-block;
           cursor: pointer;
-          background: red;
           position: relative;
 
           img {
@@ -560,6 +561,7 @@ onMounted(() => {
           font-size: 12px;
           color: #849aae;
           background: rgba(132, 154, 174, 0.1);
+          margin-bottom: 10px;
         }
       }
       .info-desc {
@@ -673,6 +675,7 @@ onMounted(() => {
                 font-weight: bold;
                 color: #333;
                 font-size: 14px;
+                // max-width: 50%;
               }
             }
             .area {
@@ -702,7 +705,8 @@ onMounted(() => {
       .name-info {
         display: flex;
         font-size: 26px;
-        align-items: center;
+        align-items: flex-start;
+        flex-direction: column;
       }
       .top-info {
         color: #fe615a;
@@ -715,7 +719,7 @@ onMounted(() => {
         }
         .price-number {
           font-family: Tahoma-Bold;
-          font-size: 30px;
+          font-size: 20px;
         }
         .price-unit {
           font-family: HiraginoSansGB-W6;
@@ -757,7 +761,7 @@ onMounted(() => {
 }
 .google-map {
   width: 100%;
-  height: 300px;
+  height: 500px;
   margin-top: 30px;
 }
 .swiper-button-next,

src/views/home/index.vue

@@ -24,13 +24,13 @@
                   </div>
                 </div>
                 <div class="location">
-                  <span>地址：</span><span>{{ i.address }}</span>
+                  <span>address：</span><span>{{ i.address }}</span>
                 </div>
                 <div class="house">
-                  <span>户型：</span><span>{{ i.cad }}</span> <span>建面: </span
-                  ><span>120-196㎡</span>
+                  <span>Unit Layout：</span><span>{{ i.cad }}</span>
+                  <span>Building Area: </span><span>120-196㎡</span>
                 </div>
-                <div class="role">新房顾问：{{ i.agent }}</div>
+                <div class="role">Sales Consultant：{{ i.agent }}</div>
                 <div class="tag">
                   <div class="tag-item" v-for="j in i.label">{{ j }}</div>
                 </div>
@@ -39,14 +39,14 @@
             <div class="item-price">
               <div class="unit-price">
                 <!-- <span>{{ i.price }}</span> 元/㎡(均价) -->
-                <span>{{ i.price }}</span> (均价)
+                <span>{{ i.price }}</span> ( Average Price)
               </div>
-              <div class="total-price">总价{{ i.total }}</div>
+              <div class="total-price">Total price{{ i.total }}</div>
             </div>
           </div>
         </div>
         <div class="list-right">
-          <p class="title">热门楼盘</p>
+          <p class="title">Popular Properties</p>
           <div class="hot-list">
             <div
               class="hot-item"
@@ -61,13 +61,13 @@
                   <span>{{ i.title }}</span>
                   <div class="hot-label">
                     <div class="item zs">{{ i.tags[0] }}</div>
-                    <div class="item zz">{{ i.tags[2] }}</div>
+                    <div class="item zz">{{ i.tags[1] }}</div>
                   </div>
                 </div>
 
                 <div class="price-wrapper">
                   <div class="hot-price">{{ i.total }}</div>
-                  <div class="hot-unit">(万/套)</div>
+                  <!-- <div class="hot-unit">(万/套)</div> -->
                 </div>
               </div>
             </div>
@@ -112,6 +112,7 @@ onMounted(() => {});
 </script>
 <style lang="scss" scoped>
 .home {
+  // word-break: break-all;
   .list {
     position: relative;
     width: 1174px;
@@ -135,7 +136,7 @@ onMounted(() => {});
         }
         .item-info {
           display: flex;
-          align-items: flex-start;
+          align-items: center;
           justify-content: flex-start;
 
           .item-cover {
@@ -156,7 +157,7 @@ onMounted(() => {});
           }
           .item-text {
             margin-left: 40px;
-            height: 178px;
+            min-height: 178px;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
@@ -165,6 +166,8 @@ onMounted(() => {});
               display: flex;
               align-items: flex-start;
               justify-content: flex-start;
+              flex-direction: column;
+              margin-bottom: 10px;
 
               .name {
                 display: inline-block;
@@ -191,7 +194,7 @@ onMounted(() => {});
                   text-align: center;
                   font-weight: 400;
                   color: #fff;
-
+                  margin-top: 10px;
                   &.zs {
                     background: #5f94ff;
                   }
@@ -220,15 +223,17 @@ onMounted(() => {});
                 font-size: 12px;
                 color: #849aae;
                 background: rgba(132, 154, 174, 0.1);
+                margin-bottom: 10px;
               }
             }
           }
         }
         .item-price {
+          padding-left: 20px;
           .unit-price {
             color: #fe615a;
             span {
-              font-size: 28px;
+              font-size: 22px;
               line-height: 28px;
               vertical-align: bottom;
             }
@@ -267,18 +272,20 @@ onMounted(() => {});
           .hot-text {
             .hot-name {
               display: flex;
-              align-items: center;
+              align-items: flex-start;
               justify-content: flex-start;
+              flex-direction: column;
               > span {
                 display: inline-block;
                 font-size: 14px;
                 color: #18253e;
-                max-width: 82px;
+                width: 100%;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
               }
               .hot-label {
+                margin: 5px 0;
                 display: flex;
                 .item {
                   height: 16px;
@@ -287,6 +294,8 @@ onMounted(() => {});
                   padding: 0 4px;
                   box-sizing: border-box;
                   border-radius: 2px;
+                  // flex: 1;
+
                   &.zs {
                     color: #3072f6;
                     background: rgba(107, 153, 246, 0.11);
@@ -303,9 +312,10 @@ onMounted(() => {});
             .price-wrapper {
               display: flex;
               .hot-price {
-                font-size: 14px;
+                font-size: 13px;
                 color: #fe615a;
                 font-weight: 700;
+                word-break: break-all;
               }
               .hot-unit {
                 font-size: 14px;

vite.config.js

@@ -12,7 +12,7 @@ export default defineConfig({
     // assetsDir: "assets",
     // outDir: 'dist', // 输出目录
     // emptyOutDir: true,
-    // copyPublicDir: false,
+    copyPublicDir: false,
   },
   plugins: [
     vue(),