|
@@ -10,7 +10,38 @@
|
|
|
<ion-content>
|
|
|
|
|
|
<!-- 顶部搜索栏 -->
|
|
|
- <ion-searchbar></ion-searchbar>
|
|
|
+ <div class="searchbar">
|
|
|
+ <div class="searchbar-wrapper">
|
|
|
+ <div class="searchbar-left">
|
|
|
+ <div class="search-icon-wrapper">
|
|
|
+ <span class="search-icon searchbar-icon">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
|
+ <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
|
|
|
+ </path>
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="searchbar-center">
|
|
|
+ <div class="searchbar-input-spacer"></div>
|
|
|
+
|
|
|
+ <input type="text" class="searchbar-input" maxlength="2048" name="q" autocapitalize="off" autocomplete="off" title="Search" role="combobox" placeholder="Search">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="searchbar-right">
|
|
|
+ <svg class="voice-search" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
|
+ <path fill="#4285f4" d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z">
|
|
|
+ </path>
|
|
|
+ <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
|
|
|
+ <path fill="#fbbc05" d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z">
|
|
|
+ </path>
|
|
|
+ <path fill="#ea4335" d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z">
|
|
|
+ </path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
<!-- 导航栏 -->
|
|
|
<ion-toolbar>
|
|
@@ -74,8 +105,8 @@
|
|
|
<!-- 发现页 -->
|
|
|
<div *ngIf="selectedSegment === 'explore'">
|
|
|
<!-- 装修锦囊块 -->
|
|
|
- <ion-card>
|
|
|
- <ion-card-header>
|
|
|
+ <ion-card class="card__content">
|
|
|
+ <ion-card-header class="card-title">
|
|
|
装修锦囊
|
|
|
</ion-card-header>
|
|
|
<ion-card-content>
|
|
@@ -84,8 +115,8 @@
|
|
|
<ion-row>
|
|
|
<!-- 空间设计块 -->
|
|
|
<ion-col>
|
|
|
- <ion-card>
|
|
|
- <ion-card-header>
|
|
|
+ <ion-card class="card">
|
|
|
+ <ion-card-header class="card-title">
|
|
|
<ion-label>
|
|
|
<ion-icon name="dice-outline"></ion-icon>
|
|
|
空间设计
|
|
@@ -121,8 +152,8 @@
|
|
|
</ion-col>
|
|
|
<!-- 装前必看块 -->
|
|
|
<ion-col>
|
|
|
- <ion-card>
|
|
|
- <ion-card-header>
|
|
|
+ <ion-card class="card">
|
|
|
+ <ion-card-header class="card-title">
|
|
|
<ion-label>
|
|
|
<ion-icon name="send-outline"></ion-icon>
|
|
|
装前必看
|
|
@@ -157,8 +188,8 @@
|
|
|
</ion-col>
|
|
|
<!-- 家具家电块 -->
|
|
|
<ion-col>
|
|
|
- <ion-card>
|
|
|
- <ion-card-header>
|
|
|
+ <ion-card class="card">
|
|
|
+ <ion-card-header class="card-title">
|
|
|
<ion-label>
|
|
|
<ion-icon name="desktop-outline"></ion-icon>
|
|
|
家具家电
|
|
@@ -193,8 +224,8 @@
|
|
|
</ion-col>
|
|
|
<!-- 家居软装块 -->
|
|
|
<ion-col>
|
|
|
- <ion-card>
|
|
|
- <ion-card-header>
|
|
|
+ <ion-card class="card">
|
|
|
+ <ion-card-header class="card-title">
|
|
|
<ion-label>
|
|
|
<ion-icon name="bed-outline"></ion-icon>
|
|
|
家居软装
|
|
@@ -241,7 +272,32 @@
|
|
|
</ion-thumbnail>
|
|
|
<ion-label>
|
|
|
<h2>{{item.title}}</h2>
|
|
|
- <p>{{item.user}} - {{item.likes}} Likes</p>
|
|
|
+ <p>{{item.user}}</p>
|
|
|
+ <div class="like-wrapper">
|
|
|
+ <input class="check" type="checkbox" id="like-toggle" />
|
|
|
+ <label class="container" for="like-toggle">
|
|
|
+ <svg
|
|
|
+ viewBox="0 0 512 512"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ class="icon inactive"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <svg
|
|
|
+ viewBox="0 0 512 512"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ class="icon active"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <div class="checkmark"></div>
|
|
|
+ <span class="like-text">{{item.likes}}</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
<p>{{item.comments}} Comments</p>
|
|
|
<p>{{item.tags}}</p>
|
|
|
</ion-label>
|
|
@@ -252,6 +308,31 @@
|
|
|
<!-- 视频页 -->
|
|
|
<div *ngIf="selectedSegment === 'video'">
|
|
|
<!-- 视频内容 -->
|
|
|
+ <div class="like-wrapper">
|
|
|
+ <input class="check" type="checkbox" id="like-toggle" />
|
|
|
+ <label class="container" for="like-toggle">
|
|
|
+ <svg
|
|
|
+ viewBox="0 0 512 512"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ class="icon inactive"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <svg
|
|
|
+ viewBox="0 0 512 512"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ class="icon active"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <div class="checkmark"></div>
|
|
|
+ <span class="like-text">like</span>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
<img src="assets\img\customer-avatar.jpg" alt="Example 0">
|
|
|
</div>
|
|
|
|