首页
This commit is contained in:
parent
444c6bb486
commit
8ceba4234d
1465
package-lock.json
generated
1465
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -47,6 +47,9 @@ export default ({
|
||||
html {
|
||||
background-color: #eff7ff;
|
||||
}
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
|
||||
BIN
src/assets/homeImage/addBtn.png
Normal file
BIN
src/assets/homeImage/addBtn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/homeImage/addMarker.png
Normal file
BIN
src/assets/homeImage/addMarker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/homeImage/addressImg.png
Normal file
BIN
src/assets/homeImage/addressImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/homeImage/apartment-bottom.png
Normal file
BIN
src/assets/homeImage/apartment-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 B |
BIN
src/assets/homeImage/apartment-icon.png
Normal file
BIN
src/assets/homeImage/apartment-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/homeImage/apartment-text.png
Normal file
BIN
src/assets/homeImage/apartment-text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
12
src/assets/homeImage/authenticationBg.svg
Normal file
12
src/assets/homeImage/authenticationBg.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="275px" height="28px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="945.644028103045" y1="2440.25" x2="701.55737704918" y2="2440.25" id="LinearGradient1914">
|
||||
<stop id="Stop1915" stop-color="#fff9fd" stop-opacity="0" offset="0" />
|
||||
<stop id="Stop1916" stop-color="#8080ff" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -670 -2428 )">
|
||||
<path d="M 670 2428 L 945 2428 L 945 2449 A 7 7 0 0 1 938 2456 L 677 2456 A 7 7 0 0 1 670 2449 L 670 2428 Z " fill-rule="nonzero" fill="url(#LinearGradient1914)" stroke="none" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/homeImage/authenticationBtnCode.svg
Normal file
6
src/assets/homeImage/authenticationBtnCode.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1148 -36 )">
|
||||
<path d="M 3.63636363636364 14.5454545454545 L 5.45454545454545 14.5454545454545 L 5.45454545454545 16.3636363636364 L 3.63636363636364 16.3636363636364 L 3.63636363636364 14.5454545454545 Z M 3.63636363636364 3.63636363636364 L 5.45454545454545 3.63636363636364 L 5.45454545454545 5.45454545454545 L 3.63636363636364 5.45454545454545 L 3.63636363636364 3.63636363636364 Z M 14.5454545454545 3.63636363636364 L 16.3636363636364 3.63636363636364 L 16.3636363636364 5.45454545454545 L 14.5454545454545 5.45454545454545 L 14.5454545454545 3.63636363636364 Z M 1.81818181818182 12.7272727272727 L 1.81818181818182 18.1676136363636 L 7.27272727272727 18.1676136363636 L 7.27272727272727 12.7272727272727 L 1.81818181818182 12.7272727272727 Z M 1.81818181818182 1.81818181818182 L 1.81818181818182 7.27272727272727 L 7.27272727272727 7.27272727272727 L 7.27272727272727 1.81818181818182 L 1.81818181818182 1.81818181818182 Z M 12.7272727272727 1.81818181818182 L 12.7272727272727 7.27272727272727 L 18.1818181818182 7.27272727272727 L 18.1818181818182 1.81818181818182 L 12.7272727272727 1.81818181818182 Z M 0 10.9090909090909 L 9.09090909090909 10.9090909090909 L 9.09090909090909 20 L 0 20 L 0 10.9090909090909 Z M 14.5454545454545 18.1818181818182 L 16.3636363636364 18.1818181818182 L 16.3636363636364 20 L 14.5454545454545 20 L 14.5454545454545 18.1818181818182 Z M 18.1818181818182 18.1818181818182 L 20 18.1818181818182 L 20 20 L 18.1818181818182 20 L 18.1818181818182 18.1818181818182 Z M 18.1818181818182 10.9090909090909 L 20 10.9090909090909 L 20 16.3636363636364 L 14.5454545454545 16.3636363636364 L 14.5454545454545 14.5454545454545 L 12.7272727272727 14.5454545454545 L 12.7272727272727 20 L 10.9090909090909 20 L 10.9090909090909 10.9090909090909 L 16.3636363636364 10.9090909090909 L 16.3636363636364 12.7272727272727 L 18.1818181818182 12.7272727272727 L 18.1818181818182 10.9090909090909 Z M 0 0 L 9.09090909090909 0 L 9.09090909090909 9.09090909090909 L 0 9.09090909090909 L 0 0 Z M 10.9090909090909 0 L 20 0 L 20 9.09090909090909 L 10.9090909090909 9.09090909090909 L 10.9090909090909 0 Z " fill-rule="nonzero" fill="#7b79ff" stroke="none" transform="matrix(1 0 0 1 1148 36 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
src/assets/homeImage/authenticationBtnImg.png
Normal file
BIN
src/assets/homeImage/authenticationBtnImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/homeImage/authenticationLogo.png
Normal file
BIN
src/assets/homeImage/authenticationLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/homeImage/authenticationText.png
Normal file
BIN
src/assets/homeImage/authenticationText.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/homeImage/brand.png
Normal file
BIN
src/assets/homeImage/brand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
11
src/assets/homeImage/carousel.svg
Normal file
11
src/assets/homeImage/carousel.svg
Normal file
File diff suppressed because one or more lines are too long
12
src/assets/homeImage/checkBG.svg
Normal file
12
src/assets/homeImage/checkBG.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="459px" height="55px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<mask fill="white" id="clip1945">
|
||||
<path d="M 35.615234375 0.263888888888914 L 40.2772261838268 5 L 449 5 C 454.6 5 459 9.40000000000009 459 15 L 459 45 C 459 50.5999999999999 454.6 55 449 55 L 10 55 C 4.40000000000009 55 0 50.5999999999999 0 45 L 0 15 C 0 9.40000000000009 4.40000000000009 5 10 5 L 29.7231043073261 5 L 34.384765625 0.263888888888914 C 34.5579427083333 0.0879629629630472 34.7630208333333 0 35 0 C 35.2369791666667 0 35.4420572916667 0.0879629629630472 35.615234375 0.263888888888914 Z " fill-rule="evenodd" />
|
||||
</mask>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -117 -149 )">
|
||||
<path d="M 35.615234375 0.263888888888914 L 40.2772261838268 5 L 449 5 C 454.6 5 459 9.40000000000009 459 15 L 459 45 C 459 50.5999999999999 454.6 55 449 55 L 10 55 C 4.40000000000009 55 0 50.5999999999999 0 45 L 0 15 C 0 9.40000000000009 4.40000000000009 5 10 5 L 29.7231043073261 5 L 34.384765625 0.263888888888914 C 34.5579427083333 0.0879629629630472 34.7630208333333 0 35 0 C 35.2369791666667 0 35.4420572916667 0.0879629629630472 35.615234375 0.263888888888914 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 117 149 )" />
|
||||
<path d="M 35.615234375 0.263888888888914 L 40.2772261838268 5 L 449 5 C 454.6 5 459 9.40000000000009 459 15 L 459 45 C 459 50.5999999999999 454.6 55 449 55 L 10 55 C 4.40000000000009 55 0 50.5999999999999 0 45 L 0 15 C 0 9.40000000000009 4.40000000000009 5 10 5 L 29.7231043073261 5 L 34.384765625 0.263888888888914 C 34.5579427083333 0.0879629629630472 34.7630208333333 0 35 0 C 35.2369791666667 0 35.4420572916667 0.0879629629630472 35.615234375 0.263888888888914 Z " stroke-width="2" stroke="#ebebeb" fill="none" transform="matrix(1 0 0 1 117 149 )" mask="url(#clip1945)" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/homeImage/corner.svg
Normal file
6
src/assets/homeImage/corner.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="33px" height="32px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1528 -2313 )">
|
||||
<path d="M 33 8 L 33 32 C 33 14.08 18.9200000000001 0 0.992435082777774 0 L 25 0 C 29.48 0 33 3.51999999999998 33 8 Z " fill-rule="nonzero" fill="#fddf6d" stroke="none" transform="matrix(1 0 0 1 1528 2313 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
src/assets/homeImage/indexBg.png
Normal file
BIN
src/assets/homeImage/indexBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/homeImage/indexRegularFirst.png
Normal file
BIN
src/assets/homeImage/indexRegularFirst.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 578 B |
11
src/assets/homeImage/indexRegularFourth.svg
Normal file
11
src/assets/homeImage/indexRegularFourth.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px" height="22px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter1867">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -135 -205 )">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="22" height="22" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAyKADAAQAAAABAAAAyAAAAACbWz2VAAAJz0lEQVR4Ae2dPY9bRRiFd+0EUZACCZoUSFBCt94toITkByBEEEg0NOmRIPkJBISo0yBFFEihIA0VHx00602xok6BFC0KiRANIK3s5X3RvYk9a3vG6+u5Z3wfS9b9mjtz5nnn7D3JOvHWFi8IQAACEIAABCAAAQhAAAIQgAAEIAABCEAAAhCAAAQgAAEIQAACEIAABCAAAQhAAAIQgAAEIAABCEAAAhCAAAQgAAEIQAACEIAABCAAAQhAAAIQgAAEIAABCEAAAhCAAAQgAAEIQAACEIAABCAAAQhAAAIQgAAEIAABCFQEts9CYnd399OTk5P37d7n7N2v+hjbdmznfcsrncC2vXrGrec7fpvtn9iucxzZbnpPtNxyloahfjuRkb0f2vmvhsPhx35imddSBjFjvGsF+9IGeHqZQWgLAREC/5pRPjCjfJ2qp/7pH20/GAw+s0af2/tctDENIKBJwNfuWxcvXnzm6Ojo+xSJSU+QnZ2d1815P6Z0SBsIlEDAktAbd+/e/Smm1bNa9GXmuBNtRAMIFEQgdU1HDWLR6j2b94WC5o5UCKQQuFCt7YVtowaxuz9a2AMXIVAugejaTjHIi+XOH+UQWEggurZTDPLUwiG4CIFyCUTXdopB+MVfuQsA5YsJRNd2ikGOF4/BVQgUSyC6tlMM8k+x00c4BBYTiK7tFIP4Z1l4QWATCUTXdopBNhEMc4JAEgEMkoSJRl0lgEG6WnnmnUSglE/mHtuHy6J/JZc0Y71G9rGg7v17EJ+zleK8XjmmFZVikPMG9MbBwcH1afkclUjAPgP1iem+VoL2UgziLK/Zx+4H/X7/6v7+/r0S4KJxmsDe3t5Lo9Hopp29NH1F96ioP4PYU+TSeDwe2k+gt3WRomwWAa+Z185rOOu66rmiDFJBfNa2t6vHtCpXdE0QqGp120557Yp6lRSxQrBErpCI2HGJkSpEWOIT5PEciFyPUcjtlBqpQpBFG6SaDJErrGrLxyVHqhBdyRErnAuRKySS+XgTIlWILNcT5EY48DqOiVzroJrWZwuRKsuaymKQ6hd8Vwz1n2m4V2pF5FoJ3/I3Z45Uvoau5PqlcRaDOHKb0De9Xm/XPjLyw/IlONMdHrm+98f+me7mpigBZ+uMrWGW34r72vE15GspKq6hBtkM4nr9N+D2n3Vdtt0sj0ciV0OrZEY3bUQqXzu5P0WR1SA1ZyJXTaLM7SZHqrAirRjERRC5wlLoH3chUoVVaM0gLoTIFZZD97grkSqsQKsGqcUQuWoSmtsuRaqwAhIGcVFErrA07R93MVKF1GUM4sKIXGF52jvuaqQKiUsZpBZH5KpJtLPtcqQKiUsaxEUSucJSrf+YSHWasaxBXCqR63TB1nWGSDWbrLRBaslErprEerZEqvlcizCIyydyzS/iWa8QqeLkijGIT4XIFS9oagsiVRqpogxST4nIVZM425ZIlc6tSIP49Ihc6UWuWxKpahLp22IN4lMkcqUXmkiVzmqyZdEGqSdC5KpJzN4SqWZzSTm7EQbxiRK5TpebSHWaybJnNsYgPnEi15PyE6mesFhlb6MMUoPoeuQiUtUrYfXtRhrEsXQxchGpVjdE2MPGGsQn2qXIRaQKl3YzxxttkBrRpkcuIlVd6ea3nTCIY9vEyEWkat4QYY+dMYhPfJMiF5EqXMrrOe6UQWqEpUcuIlVdyfVvO2kQx1pi5CJSrd8Q4QidNYiDKClyEanCpZvnuNMGqRGrRy4iVV2p/FsMUjFXjFxEqvyGCEfEIBNElCIXkWqiMC3uYpAZ8NuOXESqGUVp6dQmfUdhowg9clnEORiNRjf9e0Ya7Xx2Z/9/x2J1Kcd4W/6FNP1+/6o/OWdL4iwGWbAGqoVzufqJvvZvUcpkxHrGN+wLaa7XB2xnEyBizeYydTZz5Joaew0HWb/jbw36s3aJQRJxt/C3XInK0pu18R1/6eo0WxKxlqhL7si1hLSUpkSqFEpBG54gAZCUw8IiF5Eqpahz2mCQOWBip0uIXESqWBXj14lYcUZzW4hHLiLV3MqlX+AJks5qbkuxyEWkmlup5S9gkOWZzbxDIXIRqWaWZqWTRKyV8E3f3HLkIlJNl6ORo5QnyLiRkTrUSebIRaQ6+9qKru0Ug/x99vG7e2eOyEWkWnl9Rdd2SsR6uLKMjnaw5shFpFp9XUXXdsoT5Gh1Hd3uoeHIRaRqbjlF13aKQZqT0+GemohcRKr8CyglYuVXtaEjrhi5iFQtrAueIC1An4hcjxKG9zZXqnsSmtOkSQIYpEmaS/Tlkev4+Phli01f2G2zjPLIr3kbb7tE1zRtkAARq0GYy3Z1eHj4wO750N87OzsD275Q9fGb/Wu/g2qfTYsEMEiL8CeHrgyBKSahCOwTsQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyCAQQSKgARdAhhEtzYoEyBwLoeGwWDwa45xGAMCTRPIYhAT/UrTwukPAjkIELFyUGaMYglgkGJLh/AcBDBIDsqMUSwBDFJs6RCegwAGyUGZMYolgEGKLR3CcxDAIDkoM0axBFIM8lexs0M4BBYTiK7tFIMcLh6DqxAolkB0bUcN0uv1vit2+giHwAICKWs7apD9/f17NsatBeNwCQIlErhVre2F2qMG8bvNaddtc39hT1yEQDkE7ldrOqo4ySDmtN+3t7ffsd4eRHukAQS0CTzwtexrOkVmkkG8o+Fw+LO57lXbvZPSMW0gIEjgjq9hX8up2rZTG06229vbe208Hr9p53bt/fzkNfYhIEbgD9MzNGN8a0+NX8S0IQcCEIAABCAAAQhAAAIQgAAEIAABCEAAAhCAAAQgAAEIQAACEIAABCAAAQhAAAIQgAAEIAABCEAAAhCAAAQgAAEIQAACEIAABCAAAQhAAAIQgAAEIAABCEAAAhCAAAQgAAEIQAACEIAABCAAAQhAAAIQgAAEIAABCECgJAL/ASeZCtKwlKqlAAAAAElFTkSuQmCC" x="135px" y="205px" filter="url(#filter1867)" />
|
||||
</g>
|
||||
</svg>
|
||||
11
src/assets/homeImage/indexRegularSecond.svg
Normal file
11
src/assets/homeImage/indexRegularSecond.svg
Normal file
File diff suppressed because one or more lines are too long
11
src/assets/homeImage/indexRegularThird.svg
Normal file
11
src/assets/homeImage/indexRegularThird.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/homeImage/informationO.png
Normal file
BIN
src/assets/homeImage/informationO.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/homeImage/informationT.png
Normal file
BIN
src/assets/homeImage/informationT.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
11
src/assets/homeImage/informationWx.svg
Normal file
11
src/assets/homeImage/informationWx.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/homeImage/intermediary.png
Normal file
BIN
src/assets/homeImage/intermediary.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
6
src/assets/homeImage/listMore.svg
Normal file
6
src/assets/homeImage/listMore.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -788 -1595 )">
|
||||
<path d="M 7.73611111111111 6.384765625 C 7.91203703703704 6.55794270833333 8 6.76302083333333 8 7 C 8 7.23697916666667 7.91203703703704 7.44205729166667 7.73611111111111 7.615234375 L 1.51388888888889 13.740234375 C 1.33796296296296 13.9134114583333 1.12962962962963 14 0.888888888888889 14 C 0.648148148148148 14 0.439814814814815 13.9134114583333 0.263888888888889 13.740234375 C 0.087962962962963 13.5670572916667 0 13.3619791666667 0 13.125 L 0 0.875 C 0 0.638020833333331 0.087962962962963 0.432942708333331 0.263888888888889 0.259765625 C 0.439814814814815 0.0865885416666656 0.648148148148148 0 0.888888888888889 0 C 1.12962962962963 0 1.33796296296296 0.0865885416666656 1.51388888888889 0.259765625 L 7.73611111111111 6.384765625 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 788 1595 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/homeImage/listOnMore.svg
Normal file
6
src/assets/homeImage/listOnMore.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -760 -1595 )">
|
||||
<path d="M 7.73611111111111 0.259765625 C 7.91203703703704 0.432942708333331 8 0.638020833333331 8 0.875 L 8 13.125 C 8 13.3619791666667 7.91203703703704 13.5670572916667 7.73611111111111 13.740234375 C 7.56018518518519 13.9134114583333 7.35185185185185 14 7.11111111111111 14 C 6.87037037037037 14 6.66203703703704 13.9134114583333 6.48611111111111 13.740234375 L 0.263888888888889 7.615234375 C 0.0879629629629631 7.44205729166667 0 7.23697916666667 0 7 C 0 6.76302083333333 0.0879629629629631 6.55794270833333 0.263888888888889 6.384765625 L 6.48611111111111 0.259765625 C 6.66203703703704 0.0865885416666656 6.87037037037037 0 7.11111111111111 0 C 7.35185185185185 0 7.56018518518519 0.0865885416666656 7.73611111111111 0.259765625 Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" transform="matrix(1 0 0 1 760 1595 )" />
|
||||
</g>
|
||||
</svg>
|
||||
21
src/assets/homeImage/liveImg.svg
Normal file
21
src/assets/homeImage/liveImg.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/homeImage/logo.png
Normal file
BIN
src/assets/homeImage/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/homeImage/logoText.png
Normal file
BIN
src/assets/homeImage/logoText.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/assets/homeImage/mapImg.png
Normal file
BIN
src/assets/homeImage/mapImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/homeImage/person.png
Normal file
BIN
src/assets/homeImage/person.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
11
src/assets/homeImage/seachImg.svg
Normal file
11
src/assets/homeImage/seachImg.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter97">
|
||||
<feColorMatrix type="matrix" values="4 0 0 0 -2.5 0 4 0 0 -2.5 0 0 4 0 -2.5 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -1102 -646 )">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,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" x="1102px" y="646px" filter="url(#filter97)" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/homeImage/seachSelectBtn.svg
Normal file
6
src/assets/homeImage/seachSelectBtn.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -816 -5903 )">
|
||||
<path d="M 7 10.8463541666667 C 7.15798611111111 10.8463541666667 7.29470486111111 10.7886284722222 7.41015625 10.6731770833333 L 11.5481770833333 6.53515625 C 11.6636284722222 6.41970486111111 11.7213541666667 6.28298611111111 11.7213541666667 6.125 C 11.7213541666667 5.96701388888889 11.6636284722222 5.83029513888889 11.5481770833333 5.71484375 L 10.6184895833333 4.78515625 C 10.5030381944444 4.66970486111111 10.3663194444444 4.61197916666667 10.2083333333333 4.61197916666667 C 10.0503472222222 4.61197916666667 9.91362847222222 4.66970486111111 9.79817708333333 4.78515625 L 7 7.58333333333333 L 4.20182291666667 4.78515625 C 4.08637152777778 4.66970486111111 3.94965277777778 4.61197916666667 3.79166666666667 4.61197916666667 C 3.63368055555556 4.61197916666667 3.49696180555556 4.66970486111111 3.38151041666667 4.78515625 L 2.45182291666667 5.71484375 C 2.33637152777778 5.83029513888889 2.27864583333333 5.96701388888889 2.27864583333333 6.125 C 2.27864583333333 6.28298611111111 2.33637152777778 6.41970486111111 2.45182291666667 6.53515625 L 6.58984375 10.6731770833333 C 6.70529513888889 10.7886284722222 6.84201388888889 10.8463541666667 7 10.8463541666667 Z M 13.0611979166667 3.486328125 C 13.6870659722222 4.55881076388889 14 5.73003472222222 14 7 C 14 8.26996527777778 13.6870659722222 9.44118923611111 13.0611979166667 10.513671875 C 12.4353298611111 11.5861545138889 11.5861545138889 12.4353298611111 10.513671875 13.0611979166667 C 9.44118923611111 13.6870659722222 8.26996527777778 14 7 14 C 5.73003472222222 14 4.55881076388889 13.6870659722222 3.486328125 13.0611979166667 C 2.41384548611111 12.4353298611111 1.56467013888889 11.5861545138889 0.938802083333333 10.513671875 C 0.312934027777778 9.44118923611111 0 8.26996527777778 0 7 C 0 5.73003472222222 0.312934027777778 4.55881076388889 0.938802083333333 3.486328125 C 1.56467013888889 2.41384548611111 2.41384548611111 1.56467013888889 3.486328125 0.938802083333333 C 4.55881076388889 0.312934027777777 5.73003472222222 0 7 0 C 8.26996527777778 0 9.44118923611111 0.312934027777777 10.513671875 0.938802083333333 C 11.5861545138889 1.56467013888889 12.4353298611111 2.41384548611111 13.0611979166667 3.486328125 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 816 5903 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
src/assets/homeImage/seek.png
Normal file
BIN
src/assets/homeImage/seek.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
6
src/assets/homeImage/selectImg.svg
Normal file
6
src/assets/homeImage/selectImg.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -508 -994 )">
|
||||
<path d="M 7 10.8463541666667 C 7.15798611111111 10.8463541666667 7.29470486111111 10.7886284722222 7.41015625 10.6731770833333 L 11.5481770833333 6.53515625 C 11.6636284722222 6.41970486111111 11.7213541666667 6.28298611111111 11.7213541666667 6.125 C 11.7213541666667 5.96701388888889 11.6636284722222 5.83029513888889 11.5481770833333 5.71484375 L 10.6184895833333 4.78515625 C 10.5030381944444 4.66970486111111 10.3663194444444 4.61197916666667 10.2083333333333 4.61197916666667 C 10.0503472222222 4.61197916666667 9.91362847222222 4.66970486111111 9.79817708333333 4.78515625 L 7 7.58333333333333 L 4.20182291666667 4.78515625 C 4.08637152777778 4.66970486111111 3.94965277777778 4.61197916666667 3.79166666666667 4.61197916666667 C 3.63368055555556 4.61197916666667 3.49696180555556 4.66970486111111 3.38151041666667 4.78515625 L 2.45182291666667 5.71484375 C 2.33637152777778 5.83029513888889 2.27864583333333 5.96701388888889 2.27864583333333 6.125 C 2.27864583333333 6.28298611111111 2.33637152777778 6.41970486111111 2.45182291666667 6.53515625 L 6.58984375 10.6731770833333 C 6.70529513888889 10.7886284722222 6.84201388888889 10.8463541666667 7 10.8463541666667 Z M 13.0611979166667 3.486328125 C 13.6870659722222 4.55881076388889 14 5.73003472222222 14 7 C 14 8.26996527777778 13.6870659722222 9.44118923611111 13.0611979166667 10.513671875 C 12.4353298611111 11.5861545138889 11.5861545138889 12.4353298611111 10.513671875 13.0611979166667 C 9.44118923611111 13.6870659722222 8.26996527777778 14 7 14 C 5.73003472222222 14 4.55881076388889 13.6870659722222 3.486328125 13.0611979166667 C 2.41384548611111 12.4353298611111 1.56467013888889 11.5861545138889 0.938802083333333 10.513671875 C 0.312934027777778 9.44118923611111 0 8.26996527777778 0 7 C 0 5.73003472222222 0.312934027777778 4.55881076388889 0.938802083333333 3.486328125 C 1.56467013888889 2.41384548611111 2.41384548611111 1.56467013888889 3.486328125 0.938802083333333 C 4.55881076388889 0.312934027777777 5.73003472222222 0 7 0 C 8.26996527777778 0 9.44118923611111 0.312934027777777 10.513671875 0.938802083333333 C 11.5861545138889 1.56467013888889 12.4353298611111 2.41384548611111 13.0611979166667 3.486328125 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 508 994 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/homeImage/selectInfoTabIcon.svg
Normal file
6
src/assets/homeImage/selectInfoTabIcon.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="10px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -404 -174 )">
|
||||
<path d="M 5 7.74739583333333 C 5.11284722222222 7.74739583333333 5.21050347222222 7.70616319444445 5.29296875 7.62369791666667 L 8.24869791666667 4.66796875 C 8.33116319444444 4.58550347222222 8.37239583333333 4.48784722222222 8.37239583333333 4.375 C 8.37239583333333 4.26215277777778 8.33116319444444 4.16449652777778 8.24869791666667 4.08203125 L 7.58463541666667 3.41796875 C 7.50217013888889 3.33550347222222 7.40451388888889 3.29427083333333 7.29166666666667 3.29427083333333 C 7.17881944444445 3.29427083333333 7.08116319444445 3.33550347222222 6.99869791666667 3.41796875 L 5 5.41666666666667 L 3.00130208333333 3.41796875 C 2.91883680555556 3.33550347222222 2.82118055555556 3.29427083333333 2.70833333333333 3.29427083333333 C 2.59548611111111 3.29427083333333 2.49782986111111 3.33550347222222 2.41536458333333 3.41796875 L 1.75130208333333 4.08203125 C 1.66883680555556 4.16449652777778 1.62760416666667 4.26215277777778 1.62760416666667 4.375 C 1.62760416666667 4.48784722222222 1.66883680555556 4.58550347222222 1.75130208333333 4.66796875 L 4.70703125 7.62369791666667 C 4.78949652777778 7.70616319444445 4.88715277777778 7.74739583333333 5 7.74739583333333 Z M 9.32942708333333 2.490234375 C 9.77647569444444 3.25629340277778 10 4.09288194444444 10 5 C 10 5.90711805555556 9.77647569444444 6.74370659722222 9.32942708333333 7.509765625 C 8.88237847222222 8.27582465277778 8.27582465277778 8.88237847222222 7.509765625 9.32942708333333 C 6.74370659722222 9.77647569444444 5.90711805555556 10 5 10 C 4.09288194444444 10 3.25629340277778 9.77647569444444 2.490234375 9.32942708333333 C 1.72417534722222 8.88237847222222 1.11762152777778 8.27582465277778 0.670572916666667 7.509765625 C 0.223524305555556 6.74370659722222 0 5.90711805555556 0 5 C 0 4.09288194444444 0.223524305555556 3.25629340277778 0.670572916666667 2.490234375 C 1.11762152777778 1.72417534722222 1.72417534722222 1.11762152777778 2.490234375 0.670572916666666 C 3.25629340277778 0.223524305555555 4.09288194444444 0 5 0 C 5.90711805555556 0 6.74370659722222 0.223524305555555 7.509765625 0.670572916666666 C 8.27582465277778 1.11762152777778 8.88237847222222 1.72417534722222 9.32942708333333 2.490234375 Z " fill-rule="nonzero" fill="#7f7f7f" stroke="none" transform="matrix(1 0 0 1 404 174 )" />
|
||||
</g>
|
||||
</svg>
|
||||
11
src/assets/homeImage/shopImg.svg
Normal file
11
src/assets/homeImage/shopImg.svg
Normal file
File diff suppressed because one or more lines are too long
6
src/assets/homeImage/topTitleIcon.svg
Normal file
6
src/assets/homeImage/topTitleIcon.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -721 -5998 )">
|
||||
<path d="M 8.64973958333333 5.35026041666667 C 9.10546875 5.80598958333333 9.33333333333333 6.35590277777778 9.33333333333333 7 C 9.33333333333333 7.64409722222222 9.10546875 8.19401041666667 8.64973958333333 8.64973958333333 C 8.19401041666667 9.10546875 7.64409722222222 9.33333333333333 7 9.33333333333333 C 6.35590277777778 9.33333333333333 5.80598958333333 9.10546875 5.35026041666667 8.64973958333333 C 4.89453125 8.19401041666667 4.66666666666667 7.64409722222222 4.66666666666667 7 C 4.66666666666667 6.35590277777778 4.89453125 5.80598958333333 5.35026041666667 5.35026041666667 C 5.80598958333333 4.89453125 6.35590277777778 4.66666666666667 7 4.66666666666667 C 7.64409722222222 4.66666666666667 8.19401041666667 4.89453125 8.64973958333333 5.35026041666667 Z M 9.48828125 2.70703125 C 8.72873263888889 2.26345486111111 7.89930555555556 2.04166666666667 7 2.04166666666667 C 6.10069444444444 2.04166666666667 5.27126736111111 2.26345486111111 4.51171875 2.70703125 C 3.75217013888889 3.15060763888889 3.15060763888889 3.75217013888889 2.70703125 4.51171875 C 2.26345486111111 5.27126736111111 2.04166666666667 6.10069444444444 2.04166666666667 7 C 2.04166666666667 7.89930555555556 2.26345486111111 8.72873263888889 2.70703125 9.48828125 C 3.15060763888889 10.2478298611111 3.75217013888889 10.8493923611111 4.51171875 11.29296875 C 5.27126736111111 11.7365451388889 6.10069444444444 11.9583333333333 7 11.9583333333333 C 7.89930555555556 11.9583333333333 8.72873263888889 11.7365451388889 9.48828125 11.29296875 C 10.2478298611111 10.8493923611111 10.8493923611111 10.2478298611111 11.29296875 9.48828125 C 11.7365451388889 8.72873263888889 11.9583333333333 7.89930555555556 11.9583333333333 7 C 11.9583333333333 6.10069444444444 11.7365451388889 5.27126736111111 11.29296875 4.51171875 C 10.8493923611111 3.75217013888889 10.2478298611111 3.15060763888889 9.48828125 2.70703125 Z M 13.0611979166667 3.486328125 C 13.6870659722222 4.55881076388889 14 5.73003472222222 14 7 C 14 8.26996527777778 13.6870659722222 9.44118923611111 13.0611979166667 10.513671875 C 12.4353298611111 11.5861545138889 11.5861545138889 12.4353298611111 10.513671875 13.0611979166667 C 9.44118923611111 13.6870659722222 8.26996527777778 14 7 14 C 5.73003472222222 14 4.55881076388889 13.6870659722222 3.486328125 13.0611979166667 C 2.41384548611111 12.4353298611111 1.56467013888889 11.5861545138889 0.938802083333333 10.513671875 C 0.312934027777778 9.44118923611111 0 8.26996527777778 0 7 C 0 5.73003472222222 0.312934027777778 4.55881076388889 0.938802083333333 3.486328125 C 1.56467013888889 2.41384548611111 2.41384548611111 1.56467013888889 3.486328125 0.938802083333333 C 4.55881076388889 0.312934027777777 5.73003472222222 0 7 0 C 8.26996527777778 0 9.44118923611111 0.312934027777777 10.513671875 0.938802083333333 C 11.5861545138889 1.56467013888889 12.4353298611111 2.41384548611111 13.0611979166667 3.486328125 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 721 5998 )" />
|
||||
</g>
|
||||
</svg>
|
||||
21
src/assets/homeImage/voide.svg
Normal file
21
src/assets/homeImage/voide.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="46px" height="46px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter1614">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
<filter x="417px" y="1211px" width="46px" height="46px" filterUnits="userSpaceOnUse" id="filter1615">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetInner" result="shadowGaussian" />
|
||||
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.662745098039216 0 " in="shadowComposite" />
|
||||
</filter>
|
||||
<g id="widget1616">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="26" height="26" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAAEVElEQVR4Ae2bvY7TQBDHly8JJIqUdFxJR3gCTEdHrqMjPMFBR3fhDe4NYp4guSe40NFd7g1S0iWRKJD4OH6j+KSNbzdex7N2LLzSyvYyOzP//87Mrp3DmK51DHQMdAz8xwzcqQP7fWNeYieh9+lH15srt9sNZ+aMLOhynf025ivXdrYHxrwD+OSeMddVuugQXa1goWdMD4dPAbysAtozdym6xcZBkhEReD6ClkTEycGQgDN9wF96Vi3vvNqz2BTbjRIhK1E38Ly9xqIBR8Z5Zxp8HtcWCVmhu2gQrDONSInJPgWy9DkAQxfs40ltjJcwBJgpZ4fjElMMCxneEJZQG4TPqF3y2d3NQes81HIwARSbD6z8p1DFDcrJrrT+a8y3EB+CUkC2GxRehig8FBki4cWvzZF6p0vIFTdWXkK/VS3U58IUIJxGKHurgZ5wu0LPI/pDDX0FOp6USQWnLtlWYEjrXJ+KEZAf4dgcvc7tTHl8WbQ17kyBHxQ+fEZH9cbqL0TLT66PN9vol+paCzX0MgyFgk4BxdW/llTKG5GdRXnFXVG1zNu1n70RgHNDBFVW3zZo31Olz4iMV4yt7XHle0njgU+nlwAKn3eST9k+45zcZjiRQIQUyCgN3UOf4l0EvPFN0h6X/VrqAo4Gn+DK+MBierE4CSBfkzIGNGRXxqyIhgEkfNbQl9fhw+QkgMlJXkFdz5AwwtYxXbsuJOi81XwE9G9J1jjwh7c6HNOuC05MPgKe1ojXaSpCXXBichJA0XCy5fQ04qBmXfBhchIQEdNeqqUu4Oh7JmvXBdMKAoQ1UiLlMqSrttYQoIraUtYaArLj7NjyXeW2FQRwiDkF7YTeU0FtKXESwGnsypJp7Ba08lvjhAo+quqED5OTAIwtqhqsOl++Q/IuL5/gB1V1ZfMXLj0+AuYu4brGJN/5CCvg+4o2nZh8BMwUDZdSFTHfnZiwd7vJOzqrUGvrke+E/Fgx5Lf8F0xbA9mDLwIMRePcNSHGmHwoVc73LTd3YdlFwHRLS6QHQjDhlHepnO9b3qI73RqwHrwEZEdP9bO3ZdtQ6U9w7oIxMiBaW8vrtU+7lwCZQOic+SZWGQetfKgcU+mj6Ld9q4Qhc3SFs67PzWXHUnEs+2Gkrj+pWQkGm5DS9+ToSIkA+W1AgGv90lS4AKTYhyLAREhxw/E5ufq8WPJwJAB2xdbXL/JoZw24mYyy4c19W66hPhORxY1i9Z0oWBMFr4ulm5dgVT+yi03VPYGtlF6Yew3LpOrAbYVEwrRhgN4FEN9sX6Pc99hWDpEE8Ul8iwLapfTA0iF1+Rh9TPbZptMhZK+PSgQOyJ+lzesmQmyK7ajgyijPokHr2OwtdBC9anzVfcRkBVKOzjGIWLHqo1oLnQ9oyDgkDKQyV02NTMcgxOY+MkHvAvsotucAIuFZuuSs/Kcp53uFnN/59wV9Tpf/NDXj2rWOgY6BjoGOgVgM/AP9HjGMza5aZwAAAABJRU5ErkJggg==" x="427px" y="1221px" filter="url(#filter1614)" />
|
||||
</g>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -417 -1211 )">
|
||||
<use xlink:href="#widget1616" filter="url(#filter1615)" />
|
||||
<use xlink:href="#widget1616" />
|
||||
</g>
|
||||
</svg>
|
||||
102
src/components/apartmentList/apartmentList.vue
Normal file
102
src/components/apartmentList/apartmentList.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="list-item">
|
||||
<div class="item-title">
|
||||
安怡居 | 旺角毓成楼
|
||||
</div>
|
||||
<div class="item-text">
|
||||
大学认可校外宿舍 ，24小时保安洋楼
|
||||
</div>
|
||||
<div class="item-img-box">
|
||||
<div class="img-box">
|
||||
<img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
|
||||
<img src="../../assets/homeImage/voide.svg" class="img" alt="">
|
||||
</div>
|
||||
<div class="img-box">
|
||||
<img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
|
||||
<img src="../../assets/homeImage/voide.svg" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
List: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.list-item {
|
||||
width: 291px;
|
||||
background: -webkit-linear-gradient(282.684800209667deg, rgba(255, 255, 255, 1) 27%, rgba(98, 177, 255, 1) 325%);
|
||||
background: -moz-linear-gradient(167.315199790333deg, rgba(255, 255, 255, 1) 27%, rgba(98, 177, 255, 1) 325%);
|
||||
background: linear-gradient(167.315199790333deg, rgba(255, 255, 255, 1) 27%, rgba(98, 177, 255, 1) 325%);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(229, 232, 240, 1);
|
||||
border-radius: 16px;
|
||||
padding: 15px 20px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
|
||||
.item-title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
text-align: left;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.item-img-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.img-box {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.item-img {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
172
src/components/checkGroup/checkBoxGroup.vue
Normal file
172
src/components/checkGroup/checkBoxGroup.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="seach-box" :class="{ 'seach-history-h': show }">
|
||||
<div class="seach-info-box">
|
||||
<div class="select-module-box">
|
||||
<div class="top-box" @click="checkList.value.splice(0, checkList.value.length)">
|
||||
<img src="../../assets/homeImage/topTitleIcon.svg"
|
||||
v-show="!checkList.value || (checkList.value && !checkList.value.length)" class="img" alt="">
|
||||
<div class="none-btn" v-show="(checkList.value && checkList.value.length)"></div>
|
||||
<span :class="[(checkList.value && checkList.value.length) ? 'none-title' : 'title']">不限</span>
|
||||
</div>
|
||||
<div style="padding-top:10px;">
|
||||
<el-checkbox-group v-model="checkList.value">
|
||||
<el-checkbox label="复选框 A"></el-checkbox>
|
||||
<el-checkbox label="复选框 B"></el-checkbox>
|
||||
<el-checkbox label="复选框 C"></el-checkbox>
|
||||
<el-checkbox label="复选框 D"></el-checkbox>
|
||||
<el-checkbox label="复选框 E"></el-checkbox>
|
||||
<el-checkbox label="复选框 F"></el-checkbox>
|
||||
<el-checkbox label="复选框 G"></el-checkbox>
|
||||
<el-checkbox label="复选框 H"></el-checkbox>
|
||||
<el-checkbox label="复选框 I"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seach-check-btn-box">
|
||||
<div class="true-btn seach-btn" @click="selectSeach">选好了</div>
|
||||
<div class="seach-btn" @click="closeSeach">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
//
|
||||
let checkList = reactive([])
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closeSeach:{
|
||||
type:Function,
|
||||
},
|
||||
selectSeach:{
|
||||
type:Function
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.seach-history-h {
|
||||
max-height: 500px !important;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.seach-box {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
z-index: 666;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.seach-info-box {
|
||||
width: 100%;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
|
||||
.seach-check-btn-box {
|
||||
width: 100%;
|
||||
border-top: 1px solid #ebebeb;
|
||||
padding: 20px 20px 25px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.seach-btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(98, 177, 255, 0);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(170, 170, 170, 1);
|
||||
border-radius: 150px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.true-btn {
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: 1px solid rgba(98, 177, 255, 1);
|
||||
color: #FFFFFF;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-module-box {
|
||||
padding: 25px 20px 20px 20px;
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px dashed #ebebeb;
|
||||
padding-bottom: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.none-btn {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.none-title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
74
src/components/indexRegularBox/indexRegularBox.vue
Normal file
74
src/components/indexRegularBox/indexRegularBox.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="regular-box">
|
||||
<div class="btn-s first-bg">
|
||||
<img src="../../assets/homeImage/indexRegularFirst.png" class="first" alt="">
|
||||
</div>
|
||||
<div class="btn-s other-bg mg-t-15">
|
||||
<img src="../../assets/homeImage/indexRegularSecond.svg" class="other-img" alt="">
|
||||
</div>
|
||||
<div class="btn-s other-bg mg-t-15">
|
||||
<img src="../../assets/homeImage/indexRegularThird.svg" class="other-img" alt="">
|
||||
</div>
|
||||
<el-badge :value="12" class="mg-t-15">
|
||||
<div class="btn-s other-bg">
|
||||
<img src="../../assets/homeImage/indexRegularFourth.svg" class="other-img" alt="">
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
List: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.regular-box {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
bottom: 60px;
|
||||
z-index: 555;
|
||||
|
||||
.first-bg {
|
||||
background: #fdda55;
|
||||
}
|
||||
|
||||
.other-bg {
|
||||
background: #62b1ff;
|
||||
}
|
||||
|
||||
.btn-s {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.first {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.other-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.mg-t-15 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
226
src/components/indexSeachInfo/indexSeachInfo.vue
Normal file
226
src/components/indexSeachInfo/indexSeachInfo.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div style="margin-top:15px;">
|
||||
<div class="title-box">
|
||||
<div class="box"></div>
|
||||
<div class="title">{{ title }}</div>
|
||||
</div>
|
||||
<div style="padding:0 0 0 18px;">
|
||||
<div class="info-box-bg">
|
||||
<div class="box"
|
||||
:class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
|
||||
<div class="btn" v-for="(item, i) in btn" :key="i" :class="{ 'mg-l-15': i % 4 !== 0 }"
|
||||
v-if="seachType === '1'">
|
||||
{{ item.text }}</div>
|
||||
|
||||
<div class="btn seach-long-btn" :class="{ 'mg-l-15': i % 3 !== 0 }" v-if="seachType === '2'"
|
||||
v-for="(item, i) in btn" :key="i">{{ item.text }}</div>
|
||||
|
||||
<div class="select-btn" v-if="seachType === '3'" @click="setSelectType(i + 1)"
|
||||
:class="[{ 'mg-l-15': i + 1 !== 1 }, { 'select-btn-click': i + 1 === selectType }]"
|
||||
v-for="(item, i) in btn" :key="i">
|
||||
{{ item.text }}
|
||||
<img :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||
class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<checkBoxGroup :show="selectType!==''" v-if="seachType === '3'" :selectSeach="selectSeach" :closeSeach="closeSeach"></checkBoxGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";
|
||||
|
||||
let selectType = ref('')
|
||||
//
|
||||
let setSelectType = (num) => {
|
||||
if (num === selectType.value) {
|
||||
selectType.value = ''
|
||||
} else {
|
||||
selectType.value = num
|
||||
}
|
||||
}
|
||||
//取消按钮
|
||||
let closeSeach = () => {
|
||||
selectType.value = ''
|
||||
}
|
||||
|
||||
//确认按钮
|
||||
let selectSeach=()=>{
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '123'
|
||||
},
|
||||
btn: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
seachType: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pad-15 {
|
||||
padding: 0 15px 0px 15px !important;
|
||||
}
|
||||
|
||||
.jus-sp {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.box {
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
background: inherit;
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box-bg {
|
||||
margin-top: 22px;
|
||||
background: #d7d7d7 !important;
|
||||
background: inherit;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
width: 550px;
|
||||
position: relative;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: #FFFFFF;
|
||||
transform: translate(0, -4px);
|
||||
border-radius: 16px;
|
||||
padding: 0 15px 10px 15px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
}
|
||||
|
||||
.select-btn-click {
|
||||
border: 1px solid rgba(80, 227, 194, 1) !important;
|
||||
color: rgba(80, 227, 194, 1) !important;
|
||||
}
|
||||
|
||||
.select-btn {
|
||||
width: 162px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 76px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 27px 0;
|
||||
cursor: pointer ;
|
||||
|
||||
.img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
object-fit: contain;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.seach-long-btn {
|
||||
width: 161px !important;
|
||||
height: 32px !important;
|
||||
cursor: pointer ;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 117px;
|
||||
height: 32px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 35px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
cursor: pointer ;
|
||||
}
|
||||
|
||||
.mg-l-15 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__inner {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
border-color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__inner:hover {
|
||||
border-color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
365
src/components/indexWaterfallBox/indexWaterfallBox.vue
Normal file
365
src/components/indexWaterfallBox/indexWaterfallBox.vue
Normal file
@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="waterfall-box">
|
||||
<div class="flexflex pos-r">
|
||||
<div class="box-tab-type">
|
||||
招室友
|
||||
</div>
|
||||
<div class="intermediary-type">
|
||||
认证中介
|
||||
</div>
|
||||
<img class="apartment-img" src="../../assets/homeImage/shopImg.svg" />
|
||||
<div class="authentication-box">
|
||||
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
|
||||
<img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt="">
|
||||
<img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="long-title">
|
||||
<span class="type">123</span>1111111111111111111111111111111111111111111111111111111111111111
|
||||
</div>
|
||||
<div class="type-tab">
|
||||
独卫套房 · 电梯 · 阳台 · 男女皆可
|
||||
</div>
|
||||
<div style="padding: 0 10px;margin-top:15px;" class="dis-f al-item">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="">
|
||||
<span class="address-text">九龙 > 尖沙咀/佐敦</span>
|
||||
</div>
|
||||
<div style="padding:0 10px;margin-top:12px;">
|
||||
<span class="unit">HK$</span>
|
||||
<span class="price">7200</span>
|
||||
<span class="date">/月</span>
|
||||
</div>
|
||||
<!-- <div class="title">
|
||||
iRent油麻地二期公寓
|
||||
</div> -->
|
||||
<!-- <div class="info-text">
|
||||
年轻有活力且超有玩趣的公寓
|
||||
</div> -->
|
||||
<div class="corner-box">
|
||||
<img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
|
||||
</div>
|
||||
<!-- <div class="suite-box">
|
||||
<div class="dis-f al-item jus-bet">
|
||||
<div class="suite-type">
|
||||
单人套间
|
||||
</div>
|
||||
<div>
|
||||
<span class="unit">HK$</span>
|
||||
<span class="price">7200</span>
|
||||
<span class="date">/月</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="dis-f al-item jus-bet">
|
||||
<div class="suite-type">
|
||||
单人间
|
||||
</div>
|
||||
<div>
|
||||
<span class="unit">HK$</span>
|
||||
<span class="price">5700</span>
|
||||
<span class="date">/月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="apartment-price-more flexcenter">更多</div> -->
|
||||
|
||||
<!-- <div class="color-scheme" style="background: #b3c7f4;"></div> -->
|
||||
<!-- <div class="apartment-top flexcenter">
|
||||
<img class="apartment-bottom-icon" src="../../assets/homeImage/apartment-bottom.png" />
|
||||
<img class="apartment-icon" src="../../assets/homeImage/apartment-icon.png" />
|
||||
<img class="apartment-text" src="../../assets/homeImage/apartment-text.png" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
color: #F95D5D;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.waterfall-box {
|
||||
width: 285px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
margin-bottom: 20px;
|
||||
|
||||
.authentication-box {
|
||||
width: 275px;
|
||||
height: 28px;
|
||||
border-radius: 0 0 16px 16px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.authentication-text {
|
||||
width: 72px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.authentication-bg {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.corner-box {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.corner-img {
|
||||
transform: rotate(91deg);
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-marker {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.type-tab {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
margin-top: 15px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.long-title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
padding: 0 10px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
margin-top: 8px;
|
||||
|
||||
.type {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
background-color: rgba(51, 51, 51, 1);
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-tab-type {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background-color: rgba(51, 51, 51, 0.56078431372549);
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.intermediary-type {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 66px;
|
||||
height: 24px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
background:#6081d5;
|
||||
line-height:24px;
|
||||
text-align:center;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
margin-top: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #AAAAAA;
|
||||
text-align: left;
|
||||
padding: 0 15px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.suite-box {
|
||||
margin-top: 20px;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.suite-type {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background: #ebebeb;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apartment-top .apartment-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.apartment-top {
|
||||
border-radius: 0;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.apartment-text {
|
||||
width: 65px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.apartment-img {
|
||||
width: 275px;
|
||||
border-radius: 10px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.apartment-top {
|
||||
background: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.apartment-top .apartment-bottom-icon {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.apartment-icon,
|
||||
.apartment-text {
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}</style>
|
||||
|
||||
235
src/components/pageTopBar/pageTopBar.vue
Normal file
235
src/components/pageTopBar/pageTopBar.vue
Normal file
@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="top-bg-img-box pos-r">
|
||||
<img src="../../assets/homeImage/indexBg.png" class="bg-img" alt="">
|
||||
<div class="info-box">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="dis-f jus-x al-item index-top-navigation-box">
|
||||
<div class="index-top-navigation dis-f al-item body-maxWidth">
|
||||
<div class="navigation-text" :class="{ 'navigation-text-click': i === 1 }" v-for="(item, i) in topTab" :key="i">
|
||||
{{
|
||||
item.title }}</div>
|
||||
<img src="" class="user-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item">
|
||||
<div class="logo-box dis-f al-item body-maxWidth">
|
||||
<img src="../../assets/homeImage/logo.png" class="logo-img" alt="">
|
||||
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item" style="margin-top:20px;">
|
||||
<div class="body-maxWidth">
|
||||
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<div style="width:100%;height:100%;" class="dis-f jus-x al-item">
|
||||
<img class="carousel-img" src="../../assets/homeImage/carousel.svg" alt="">
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm-seach-btn-box dis-f al-item jus-x">
|
||||
<div class="body-maxWidth dis-f" style="height:48px;">
|
||||
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab"
|
||||
:key="i">
|
||||
<el-badge :value="12">
|
||||
{{ item.title }}
|
||||
</el-badge>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let topTab = [
|
||||
{
|
||||
title: '寄托首页',
|
||||
}, {
|
||||
title: '论坛'
|
||||
}, {
|
||||
title: 'Offer榜'
|
||||
}, {
|
||||
title: '港校租房'
|
||||
}, {
|
||||
title: '院校库'
|
||||
}, {
|
||||
title: '兑换店'
|
||||
}, {
|
||||
title: '搜索'
|
||||
}, {
|
||||
title: '招生官'
|
||||
}, {
|
||||
title: '中外合办院校'
|
||||
}
|
||||
]
|
||||
let seachTab = [
|
||||
{
|
||||
title: '首页',
|
||||
}, {
|
||||
title: '个人房源'
|
||||
}, {
|
||||
title: '中介房源'
|
||||
}, {
|
||||
title: '品牌公寓'
|
||||
}, {
|
||||
title: '求房源'
|
||||
}, {
|
||||
title: '我的'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-bg-img-box {
|
||||
width: 100%;
|
||||
height: 568px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.756862745098039);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.index-top-navigation-box {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.index-top-navigation-box .navigation-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgba(215, 215, 215, 0.988235294117647);
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.index-top-navigation-box .navigation-text-click {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #62B1FF;
|
||||
border-bottom: 3px solid rgba(98, 177, 255, 1);
|
||||
}
|
||||
|
||||
.index-top-navigation {
|
||||
height: 60px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.top-bg-img-box .user-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box .logo-img {
|
||||
object-fit: contain;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box .logo-text-img {
|
||||
object-fit: contain;
|
||||
width: 173px;
|
||||
height: 31px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.596078431372549);
|
||||
border-bottom: 4px solid rgba(78, 144, 204, 1);
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
|
||||
width: 120px;
|
||||
height: 43px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #E2EDF7;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn-click {
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: none;
|
||||
border-bottom: 0px;
|
||||
border-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
margin: 0 auto;
|
||||
width: 660px;
|
||||
height: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
344
src/components/seachModule/seachModule.vue
Normal file
344
src/components/seachModule/seachModule.vue
Normal file
@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
|
||||
<div class="body-maxWidth">
|
||||
<div class="s-w-100 seach-box-bg">
|
||||
<div class="seach-box">
|
||||
<div class="top-seach dis-f al-item">
|
||||
<div style="position: absolute;left: -5px;top: 20px;">
|
||||
<div class="location-box dis-f jus-x al-item">
|
||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="">
|
||||
香港
|
||||
</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="dis-f al-item pos-r">
|
||||
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @blur="setHistoryShow"
|
||||
@focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
|
||||
<div class="seach-btn dis-f al-item jus-x">
|
||||
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
|
||||
搜索
|
||||
</div>
|
||||
<div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }">
|
||||
<div class="seach-history-info">
|
||||
<div>
|
||||
<div class="title">
|
||||
历史搜索
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div v-for="(item, i) in historyArr" :key="i" class="btn">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:30px;">
|
||||
<div class="title">
|
||||
热门推荐
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div v-for="(item, i) in historyArr" :key="i" class="btn">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tool-btn dis-f jus-x al-item map-btn">
|
||||
<img src="../assets/homeImage/mapImg.png" class="img" alt="">
|
||||
地图找房
|
||||
</div> -->
|
||||
<div class="tool-btn dis-f jus-x al-item add-btn">
|
||||
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
|
||||
发布房源
|
||||
</div>
|
||||
<div class=" dis-f jus-x al-item authentication-btn">
|
||||
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
|
||||
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="seach-info-box dis-f">
|
||||
<seachInfo title="学校附近" :btn="seachSchoolBtn" seachType="1"></seachInfo>
|
||||
<seachInfo title="合租" seachType="2" :btn="hireType"></seachInfo>
|
||||
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea"></seachInfo>
|
||||
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType"></seachInfo>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="dis-f">
|
||||
<selectTabBox></selectTabBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
|
||||
import selectTabBox from "../selectTabBox/selectTabBox.vue";
|
||||
//搜索框
|
||||
let seachValue = ref('')
|
||||
let historyShow = ref(false);
|
||||
let setHistoryShow = () => {
|
||||
historyShow.value = !historyShow.value
|
||||
}
|
||||
|
||||
let seachSchoolBtn = [
|
||||
{ text: '港大' },
|
||||
{ text: '科大' },
|
||||
{ text: '中大' },
|
||||
{ text: '城大' },
|
||||
{ text: '理工' },
|
||||
{ text: '浸会' },
|
||||
{ text: '教大' },
|
||||
{ text: '岭大' },
|
||||
]
|
||||
let hireType = [
|
||||
{ text: '不限' },
|
||||
{ text: '房间' },
|
||||
{ text: '床位' },
|
||||
{ text: '客厅' },
|
||||
{ text: '其他' },
|
||||
]
|
||||
let allHireType = [
|
||||
{ text: '不限' },
|
||||
{ text: 'studio' },
|
||||
{ text: '一房' },
|
||||
{ text: '两房' },
|
||||
{ text: '三房' },
|
||||
{ text: '四房以上' }
|
||||
]
|
||||
let seachArea = [
|
||||
{ text: '港岛' },
|
||||
{ text: '九龙' },
|
||||
{ text: '新界' }
|
||||
]
|
||||
let historyArr = [
|
||||
{ title: '有阳台' },
|
||||
{ title: '有洗衣机' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
]
|
||||
defineExpose({
|
||||
historyShow,
|
||||
seachValue
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.seach-box-bg {
|
||||
background: #d7d7d7 !important;
|
||||
background: inherit;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
|
||||
.seach-box {
|
||||
background: #FFFFFF;
|
||||
transform: translate(0, 5px);
|
||||
border-radius: 16px;
|
||||
|
||||
.top-seach {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
justify-content: end;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.authentication-btn {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
background: inherit;
|
||||
background-color: rgba(244, 243, 255, 1);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
margin-left:20px;
|
||||
.text-img{
|
||||
width:100px;
|
||||
height:26px;
|
||||
}
|
||||
.code-img{
|
||||
width:20px;
|
||||
height:20px;
|
||||
}
|
||||
}
|
||||
|
||||
.seach-history-h {
|
||||
max-height: 375px !important;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.seach-hiosory-box {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
z-index: 99;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.seach-history-info {
|
||||
width: 560px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
padding: 20px 25px;
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
text-align: left;
|
||||
|
||||
.btn {
|
||||
margin: 20px 30px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location-box {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(68, 68, 68, 1);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 48px;
|
||||
position: absolute;
|
||||
z-index: 666;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
border: 5px solid;
|
||||
border-color: transparent #000 transparent transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -44px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.seach-btn {
|
||||
width: 100px;
|
||||
height: 48px;
|
||||
background: inherit;
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: none;
|
||||
border-right: 0px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.map-btn {
|
||||
background: rgba(80, 227, 194, 1);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background: rgba(253, 218, 85, 1);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.seach-info-box {
|
||||
padding: 20px 10px;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
122
src/components/selectTabBox/selectTabBox.vue
Normal file
122
src/components/selectTabBox/selectTabBox.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="dis-f s-w-100">
|
||||
<div class="select-box s-w-50 bor-r">
|
||||
<div class="dis-f">
|
||||
<div class="tab-title">地理位置</div>
|
||||
<div class="tab-text">
|
||||
<div class="dis-f">
|
||||
<div class="btn jus-x al-item dis-f" :class="{'btn-check':selectPosition==='region'}" @click="selectPosition='region'">按区域</div>
|
||||
<div class="btn jus-x al-item dis-f" :class="{'btn-check':selectPosition==='school'}" @click="selectPosition='school'">按学校</div>
|
||||
</div>
|
||||
<div class="select-tab-info">
|
||||
<img src="../../assets/homeImage/checkBG.svg" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
let selectPosition = ref('region')
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
.jus-x{
|
||||
justify-content: center;
|
||||
}
|
||||
.al-item{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bor-r {
|
||||
border-right: 1px dashed #ebebeb;
|
||||
}
|
||||
|
||||
.s-w-50 {
|
||||
width: 50%;
|
||||
}
|
||||
img{
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
|
||||
.select-tab-info{
|
||||
position: relative;
|
||||
margin-top:5px;
|
||||
.img{
|
||||
width: 459px;
|
||||
height:55px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #B5B5B5;
|
||||
text-align: left;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
.info-bor-b{
|
||||
border-bottom:1px dashed #ebebeb;
|
||||
}
|
||||
.tab-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
text-align: center;
|
||||
padding-bottom:10px;
|
||||
|
||||
.btn {
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 10px;
|
||||
margin-right:30px;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
color: #50E3C2;
|
||||
border:1px solid #50E3C2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,14 +15,14 @@ const routes = [
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
|
||||
},
|
||||
{
|
||||
path: '/edit',
|
||||
name: 'edit',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/edit.vue')
|
||||
}
|
||||
// {
|
||||
// path: '/edit',
|
||||
// name: 'edit',
|
||||
// // route level code-splitting
|
||||
// // this generates a separate chunk (about.[hash].js) for this route
|
||||
// // which is lazy-loaded when the route is visited.
|
||||
// component: () => import(/* webpackChunkName: "about" */ '../views/edit.vue')
|
||||
// }
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@ -1,18 +1,501 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<pageTopBar></pageTopBar>
|
||||
<!-- 搜索模块 -->
|
||||
<seachModule></seachModule>
|
||||
<!-- 房源展示 -->
|
||||
<div class="dis-f jus-x al-item" style="margin-top:25px;">
|
||||
<div class="body-maxWidth dis-f al-item">
|
||||
<listItem></listItem>
|
||||
<listItem style="margin-left:12px;"></listItem>
|
||||
<listItem style="margin-left:12px;"></listItem>
|
||||
<listItem style="margin-left:12px;"></listItem>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 科普 -->
|
||||
<div class="dis-f jus-x al-item" style="margin-top:25px;">
|
||||
<div class="body-maxWidth dis-f al-item jus-bet">
|
||||
<div>
|
||||
<div class="information-box dis-f">
|
||||
<div class="dis-f al-item jus-bet s-w-100">
|
||||
<div class="list-box">
|
||||
<div class="dis-f al-item mg-b-5">
|
||||
<img src="../assets/homeImage/informationO.png" class="img" alt="">
|
||||
<span class="title">攻略</span>
|
||||
</div>
|
||||
<div v-for="(item, i) in informationData" :key="i" class="dis-f al-item list-li">
|
||||
<div class="list-mark"></div>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-box">
|
||||
<div class="dis-f al-item mg-b-5">
|
||||
<img src="../assets/homeImage/informationT.png" class="img" alt="">
|
||||
<span class="title">科普</span>
|
||||
</div>
|
||||
<div v-for="(item, i) in informationData" :key="i" class="dis-f al-item list-li">
|
||||
<div class="list-mark"></div>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item s-w-100">
|
||||
<img src="../assets/homeImage/listOnMore.svg" class="list-btn" alt="">
|
||||
<img src="../assets/homeImage/listMore.svg" class="list-btn mg-l-20" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="information-wx-img" style="margin-top:20px;">
|
||||
<img src="../assets/homeImage/informationWx.svg" class="information-wx-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="information-right-box dis-f jus-bet">
|
||||
<div class="dis-f jus-bet al-item">
|
||||
<div class="img-box pos-r">
|
||||
<img src="" class="img-box" alt="">
|
||||
<div class="img-list">
|
||||
<img src="../assets/homeImage/informationO.png" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box pos-r">
|
||||
<img src="" class="img-box" alt="">
|
||||
<div class="img-list">
|
||||
<img src="../assets/homeImage/informationT.png" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-bet al-item">
|
||||
<div class="img-box pos-r">
|
||||
<img src="" class="img-box" alt="">
|
||||
<div class="img-list">
|
||||
<img src="../assets/homeImage/informationO.png" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="img-box pos-r">
|
||||
<img src="" class="img-box" alt="">
|
||||
<div class="img-list">
|
||||
<img src="../assets/homeImage/informationT.png" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 瀑布流 -->
|
||||
<div class="dis-f jus-x">
|
||||
<div class="body-maxWidth dis-f al-item" style="margin-top:50px;">
|
||||
<div v-for="(item, i) in ListSelectBtn" :key="i" class="dis-f al-item">
|
||||
<div class="list-tab-btn" :class="{ 'click-tab-btn': i === 1 }">
|
||||
<div style="z-index: 666;position: relative;">
|
||||
{{ item.text }}
|
||||
</div>
|
||||
<div class="tab-marker" v-show="i === 1"></div>
|
||||
</div>
|
||||
<div :class="{ 'line-btn': i !== ListSelectBtn.length - 1 }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x">
|
||||
<div class="body-maxWidth dis-f al-item">
|
||||
<div class="waterfall-box s-w-100">
|
||||
<div ref="waterfall1">
|
||||
<div class="waterfall-first-box dis-f">
|
||||
<div class="info-box dis-f jus-x al-item first">
|
||||
<div>
|
||||
<div class="img-box dis-f jus-x al-item">
|
||||
<img src="../assets/homeImage/person.png" class="img" alt="">
|
||||
</div>
|
||||
<div class="text-center">个人房源</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-box dis-f jus-x al-item second">
|
||||
<div>
|
||||
<div class="img-box dis-f jus-x al-item">
|
||||
<img src="../assets/homeImage/intermediary.png" class="img" alt="">
|
||||
</div>
|
||||
<div class="text-center">中介房源</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-box dis-f jus-x al-item third">
|
||||
<div>
|
||||
<div class="img-box dis-f jus-x al-item">
|
||||
<img src="../assets/homeImage/brand.png" class="img" alt="">
|
||||
</div>
|
||||
<div class="text-center">品牌公寓</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-box dis-f jus-x al-item">
|
||||
<div>
|
||||
<div class="img-box dis-f jus-x al-item">
|
||||
<img src="../assets/homeImage/seek.png" class="img" alt="">
|
||||
</div>
|
||||
<div class="text-center">求房源</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="waterfall2">
|
||||
<img src="../assets/homeImage/liveImg.svg" class="live-img" alt="">
|
||||
</div>
|
||||
<div ref="waterfall3">
|
||||
<indexWaterfallBox></indexWaterfallBox>
|
||||
</div>
|
||||
<div ref="waterfall4">
|
||||
<indexWaterfallBox></indexWaterfallBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x bottom-tps">
|
||||
- 到底了 -
|
||||
</div>
|
||||
<indexRegularBox></indexRegularBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
<script setup>
|
||||
import listItem from "../components/apartmentList/apartmentList.vue";
|
||||
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
||||
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
|
||||
import seachModule from "../components/seachModule/seachModule.vue";
|
||||
import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue'
|
||||
|
||||
//
|
||||
let informationData = [
|
||||
'123456', '2456789', '3456789', '47894564', '545649879987'
|
||||
]
|
||||
let ListSelectBtn = [
|
||||
{
|
||||
text: '推荐'
|
||||
},
|
||||
{
|
||||
text: '整租'
|
||||
},
|
||||
{
|
||||
text: '合租'
|
||||
},
|
||||
{
|
||||
text: '招室友'
|
||||
},
|
||||
{
|
||||
text: '已认证'
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
name: 'HomeView'
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bottom-tps {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.information-box {
|
||||
width: 836px;
|
||||
height: 329px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
font-size: 14px;
|
||||
padding: 15px 20px 10px 20px;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.list-btn {
|
||||
width: 8px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.mg-l-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
letter-spacing: normal;
|
||||
color: #333333;
|
||||
width: 375px;
|
||||
|
||||
.mg-b-5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.list-li {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.list-mark {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #d7d7d7;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.information-wx-img {
|
||||
width: 836px;
|
||||
height: 120px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.information-right-box {
|
||||
width: 352px;
|
||||
height: 469px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
padding: 25px 18px;
|
||||
flex-direction: column;
|
||||
|
||||
.img-box {
|
||||
width: 149px;
|
||||
height: 200px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.img-list {
|
||||
width: 149px;
|
||||
height: 200px;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 149px;
|
||||
height: 200px;
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.img-box:hover .img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.list-tab-btn {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #555555;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
position: relative;
|
||||
|
||||
.tab-marker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #50e3c2;
|
||||
position: relative;
|
||||
top: -45px;
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.click-tab-btn {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.line-btn {
|
||||
width: 1px;
|
||||
background: #d7d7d7;
|
||||
height: 21px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
.waterfall-box {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
justify-content: space-between;
|
||||
|
||||
.live-img {
|
||||
width: 301px;
|
||||
height: 349px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.live-img:hover {
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
}
|
||||
|
||||
.waterfall-first-box {
|
||||
width: 284px;
|
||||
height: 284px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.first {
|
||||
border-right: 1px dashed #ebebeb;
|
||||
border-bottom: 1px dashed #ebebeb;
|
||||
}
|
||||
|
||||
.second {
|
||||
border-bottom: 1px dashed #ebebeb;
|
||||
}
|
||||
|
||||
.third {
|
||||
border-right: 1px dashed #ebebeb;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/deep/.el-carousel__arrow {
|
||||
border: 2px solid #545454;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/deep/.el-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/deep/.el-carousel__indicator--horizontal {
|
||||
padding: var(--el-carousel-indicator-padding-vertical) 2px;
|
||||
}
|
||||
|
||||
/deep/ .el-carousel__button {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/deep/ .is-active button {
|
||||
background: #62b1ff;
|
||||
}
|
||||
|
||||
/deep/ .el-input__wrapper {
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-right: 0px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
/deep/ .el-input__inner {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #7F7F7F;
|
||||
text-align: left;
|
||||
}</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user