From b208ab7e579678a9609a68c5e7557271efe036bc Mon Sep 17 00:00:00 2001
From: xiaolei <18931076385@163.com>
Date: Thu, 29 Feb 2024 18:37:15 +0800
Subject: [PATCH] axl

---
 vite-project/components.d.ts                 |   3 -
 vite-project/src/views/MyView/MyView.vue     |  16 +-
 vite-project/src/views/MyView/Order2View.vue | 219 +++++++++++++++++--
 vite-project/src/views/MyView/OrderView.vue  | 184 +++++++++++++++-
 4 files changed, 392 insertions(+), 30 deletions(-)

diff --git a/vite-project/components.d.ts b/vite-project/components.d.ts
index 25a2013..168a07f 100644
--- a/vite-project/components.d.ts
+++ b/vite-project/components.d.ts
@@ -9,9 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    VanButton: typeof import('vant/es')['Button']
-    VanCellGroup: typeof import('vant/es')['CellGroup']
-    VanField: typeof import('vant/es')['Field']
     VanGrid: typeof import('vant/es')['Grid']
     VanGridItem: typeof import('vant/es')['GridItem']
     VanNavBar: typeof import('vant/es')['NavBar']
diff --git a/vite-project/src/views/MyView/MyView.vue b/vite-project/src/views/MyView/MyView.vue
index c86f766..a642db8 100644
--- a/vite-project/src/views/MyView/MyView.vue
+++ b/vite-project/src/views/MyView/MyView.vue
@@ -19,7 +19,7 @@
     <div class="serve">
       <h3>服务工具</h3>
       <van-grid>
-        <van-grid-item @click="router.push('/order')" icon="like-o" text="服务订单" />
+        <van-grid-item @click="kk" icon="like-o" text="服务订单" />
         <van-grid-item @click="router.push('/order2')" icon="send-gift-o" text="商城订单" />
         <van-grid-item @click="router.push('/write')" icon="chat-o" text="待评价" />
         <van-grid-item @click="router.push('/tui')" icon="gold-coin-o" text="售后/退款" />
@@ -41,8 +41,18 @@
   </div>
 </template>
 <script setup>
-  import {useRouter} from 'vue-router'
-  const router = useRouter()
+import {useRouter} from 'vue-router' 
+const router = useRouter()
+  const list = [
+    {id:1,name:'厨房全套清洗',img:'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',tel:'20220101120000',price:199,desc:'日常家电清洗3小时',status:'待付款',num:1},
+    {id:2,name:'厨房全套清洗',img:'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',tel:'24354365473243',price:199,desc:'日常家电清洗3小时',status:'待评价',num:1},
+    {id:3,name:'厨房全套清洗',img:'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',tel:'63423452344322',price:199,desc:'日常家电清洗3小时',status:'待服务',num:1},
+]
+const kk=()=>{
+  router.push('/order')
+  localStorage.setItem('list',JSON.stringify(list))
+
+}
 </script>
 <style>
 /* 个人中心页面 */
diff --git a/vite-project/src/views/MyView/Order2View.vue b/vite-project/src/views/MyView/Order2View.vue
index e85c421..8731f28 100644
--- a/vite-project/src/views/MyView/Order2View.vue
+++ b/vite-project/src/views/MyView/Order2View.vue
@@ -1,38 +1,225 @@
 <template>
     <div class="sticky-container">
-        <div class="tab-container">
-            <van-sticky>
-                <van-nav-bar title="订单" left-arrow @click-left="onClickLeft" />
-                <van-tabs v-model:active="activeName">
-                    <van-tab title="全部" name="a"></van-tab>
-                    <van-tab title="待付款" name="b"></van-tab>
-                    <van-tab title="待发货" name="c"></van-tab>
-                    <van-tab title="待收货" name="c"></van-tab>
-                    <van-tab title="待评价" name="d"></van-tab>
-                </van-tabs>
-                <hr />
-
-            </van-sticky>
-        </div>
+        <van-sticky>
+            <van-nav-bar title="订单" left-arrow @click-left="onClickLeft" />
+            <van-tabs v-model:active="activeName">
+                <van-tab title="全部" name="a"></van-tab>
+                <van-tab title="待付款" name="b"></van-tab>
+                <van-tab title="待发货" name="c"></van-tab>
+                <van-tab title="待收货" name="d"></van-tab>
+                <van-tab title="待评价" name="e"></van-tab>
+            </van-tabs>
+            <hr />
+        </van-sticky>
         <div class="content">
-            <!-- 内容区域 -->
+            <div class="content">
+            <!-- 全部订单 -->
+            <div v-if="activeName==='a'" v-for="item in list" :key="item.id">
+                <div style="width: 100%;background-color:white;height: 255px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" v-if="item.status=='待付款'" @click="cancel(item.id)">取消订单</button>
+                        <button class="btn" v-if="item.status=='待评价'" @click="confirm(item.id)">再次预约</button>
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                        <button class="btns" v-if="item.status=='待付款'" @click="pay(item.id)">立即付款</button>
+                        <button class="btns" v-if="item.status=='待评价'" @click="pj(item.id)">立即评价</button>
+                    </p>
+                </div>
+                <p style="height: 5px;"></p>
+            </div>
+            <!-- 待付款 -->
+            <div  v-if="activeName==='b'" v-for="item in list" :key="item.id">
+                <div style="width: 100%;background-color: white;margin-bottom: 5px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" @click="cancel(item.id)">取消订单</button>
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                        <button class="btns" @click="pay(item.id)">立即付款</button>
+                    </p>
+                </div>
+            </div>
+            <!-- 待发货 -->
+            <div v-if="activeName==='c'" v-for="item in list" :key="item.id">
+                <div style="width: 100%;background-color: white;margin-bottom: 5px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                    </p>
+                </div>
+            </div>
+            <!-- 待收货 -->
+            <div v-if="activeName==='d'" v-for="item in list" :key="item.id">
+                <div style="width: 100%;background-color: white;margin-bottom: 5px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" @click="confirm(item.id)">再次预约</button>
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                        <button class="btns" @click="pj(item.id)">立即评价</button>
+                    </p>
+                </div>
+            </div>
+            <!-- 待评价 -->
+            <div v-if="activeName==='e'" v-for="item in list" :key="item.id">
+                <div style="width: 100%;background-color: white;margin-bottom: 5px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" @click="confirm(item.id)">再次预约</button>
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                        <button class="btns" @click="pj(item.id)">立即评价</button>
+                    </p>
+                </div>
+            </div>
+        </div>
         </div>
     </div>
 </template>
   
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 const activeName = ref('a');
+const router = useRouter();
+// 所有订单
+const list = ref(JSON.parse(localStorage.getItem('list')||'[]'))
+// 返回上一个页面
 const onClickLeft = () => {
     history.back();
 }
+// 根据内容设置字体颜色
+const getText=(e)=>{
+    if(e==='待付款'){
+        return 'orange'
+    }else if(e==='待评价'){
+        return 'black'
+    }else if(e==='待服务'){
+        return 'green'
+    }
+}
+// 取消订单
+const cancel=(e)=>{
+    const idx = list.value.findIndex(item=>item.id===e)
+    list.value.splice(idx,1)
+    localStorage.setItem('list',JSON.stringify(list.value))
+}
+// 再次预约
+const confirm=(e)=>{
+    router.push('/home')
+}
+// 联系客服
+const lx = ()=>{
+    router.push('/mesage')
+}
+// 立即付款
+const pay = ()=>{
+    router.push('/home')
+}
+// 立即评价
+const pj = ()=>{
+    router.push('/ping')
+}
 </script>
   
 <style scoped>
+/* 页面整体 */
 .content {
-    background-color: #e3e3e3;
     width: 100%;
+    background-color: rgb(242,242,242);
+    height: 700px;
+}
+/* 每一个组件 */
+.tag{
+    float: right;
+    margin-right: 20px;
+}
+/* 设置按钮样式 */
+.btn{
+    width: 80px;
+    height: 30px;
+    border-radius: 20px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    font-size: 13px;
+}
+.btns{
+    width: 80px;
+    height: 30px;
+    border-radius: 20px;
+    background-color: orange;
+    border: 1px solid #ccc;
+    color: white;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    font-size: 13px;
 }
 </style>
   
\ No newline at end of file
diff --git a/vite-project/src/views/MyView/OrderView.vue b/vite-project/src/views/MyView/OrderView.vue
index 5d4babd..96ce240 100644
--- a/vite-project/src/views/MyView/OrderView.vue
+++ b/vite-project/src/views/MyView/OrderView.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="sticky-container">
-        <div class="tab-container">
-            <van-sticky>
+        <van-sticky>
                 <van-nav-bar title="服务订单 " left-arrow @click-left="onClickLeft" />
                 <van-tabs v-model:active="activeName">
                     <van-tab title="全部" name="a"></van-tab>
@@ -10,28 +9,197 @@
                     <van-tab title="待评价" name="d"></van-tab>
                 </van-tabs>
                 <hr />
-
-            </van-sticky>
-        </div>
+        </van-sticky>
         <div class="content">
-            <!-- 内容区域 -->
+            <!-- 全部订单 -->
+            <div v-if="activeName==='a'" v-for="item in list" :key="item.id">
+                <div style="width: 100%;background-color:white;height: 255px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" v-if="item.status=='待付款'" @click="cancel(item.id)">取消订单</button>
+                        <button class="btn" v-if="item.status=='待评价'" @click="confirm(item.id)">再次预约</button>
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                        <button class="btns" v-if="item.status=='待付款'" @click="pay(item.id)">立即付款</button>
+                        <button class="btns" v-if="item.status=='待评价'" @click="pj(item.id)">立即评价</button>
+                    </p>
+                </div>
+                <p style="height: 5px;"></p>
+            </div>
+            <!-- 待付款 -->
+            <div  v-if="activeName==='b'" v-for="item in list1" :key="item.id">
+                <div style="width: 100%;background-color: white;margin-bottom: 5px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" @click="cancel(item.id)">取消订单</button>
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                        <button class="btns" @click="pay(item.id)">立即付款</button>
+                    </p>
+                </div>
+            </div>
+            <!-- 待服务 -->
+            <div v-if="activeName==='c'" v-for="item in list2" :key="item.id">
+                <div style="width: 100%;background-color: white;margin-bottom: 5px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                    </p>
+                </div>
+            </div>
+            <!-- 待评价 -->
+            <div v-if="activeName==='d'" v-for="item in list3" :key="item.id">
+                <div style="width: 100%;background-color: white;margin-bottom: 5px;">
+                    <!-- 订单状态 -->
+                    <p style="line-height: 45px;">
+                        &nbsp;&nbsp;订单号：{{ item.tel }}<span class="tag" :style="{color:getText(item.status)}">{{ item.status }}</span>
+                    </p><hr style="margin-bottom: 10px;"/>
+                     <!--订单照片  -->
+                    <img :src="item.img" style="width: 100px;height: 100px;margin-left: 5px;float: left;;border-radius: 5px;border: 0.5px solid black;margin-right: 20px;"/>
+                    <!-- 订单详情 -->
+                    <p style="margin-top: 10px;">
+                        <b>{{ item.name }}</b><br/><br/>
+                        <span style="font-size: 15px;">{{ item.desc }}</span><br/><br/>
+                        <b style="color: orange;">￥<span style="font-size: 22px;">{{ item.price }}</span>.00</b><hr style="margin-top: 10px;"/>
+                    </p>
+                    <p style="text-align: right;margin-right: 20px;margin-top: 5px;margin-bottom: 5px;">共{{ item.num }}个服务,合计：<span style="color: orange;">￥{{ item.num*item.price }}</span></p>
+                    <!-- 按钮 -->
+                    <p style="text-align: right;">
+                        <button class="btn" @click="confirm(item.id)">再次预约</button>
+                        <button class="btn" @click="lx(item.id)">联系客服</button>
+                        <button class="btns" @click="pj(item.id)">立即评价</button>
+                    </p>
+                </div>
+            </div>
         </div>
     </div>
 </template>
   
 <script setup lang="ts">
 import { ref } from 'vue';
-
+import { useRouter } from 'vue-router';
+const router = useRouter();
+// 默认展示页面
 const activeName = ref('a');
+
+//返回上一个页面
 const onClickLeft = () => {
     history.back();
 }
+// 所有订单
+const list = ref(JSON.parse(localStorage.getItem('list')||'[]'))
+// 待付款
+const list1 = ref(list.value.filter(item=>item.status==='待付款'))
+// 待服务
+const list2 = ref(list.value.filter(item=>item.status==='待服务'))
+// 待评价
+const list3 = ref(list.value.filter(item=>item.status==='待评价'))
+// 根据内容设置字体颜色
+const getText=(e)=>{
+    if(e==='待付款'){
+        return 'orange'
+    }else if(e==='待评价'){
+        return 'black'
+    }else if(e==='待服务'){
+        return 'green'
+    }
+}
+// 取消订单
+const cancel=(e)=>{
+    const idx = list.value.findIndex(item=>item.id===e)
+    list.value.splice(idx,1)
+    localStorage.setItem('list',JSON.stringify(list.value))
+}
+// 再次预约
+const confirm=(e)=>{
+    router.push('/home')
+}
+// 联系客服
+const lx = ()=>{
+    router.push('/mesage')
+}
+// 立即付款
+const pay = ()=>{
+    router.push('/home')
+}
+// 立即评价
+const pj = ()=>{
+    router.push('/ping')
+}
 </script>
   
 <style scoped>
+/* 页面整体 */
 .content {
-    background-color: #e3e3e3;
     width: 100%;
+    background-color: rgb(242,242,242);
+    height: 700px;
+}
+/* 每一个组件 */
+.tag{
+    float: right;
+    margin-right: 20px;
+}
+/* 设置按钮样式 */
+.btn{
+    width: 80px;
+    height: 30px;
+    border-radius: 20px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    font-size: 13px;
+}
+.btns{
+    width: 80px;
+    height: 30px;
+    border-radius: 20px;
+    background-color: orange;
+    border: 1px solid #ccc;
+    color: white;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    font-size: 13px;
 }
 </style>
   
\ No newline at end of file
-- 
Gitee