Optimize UI for unit converter and random draw, remove relative calculator page

games/minipro/calculation/miniprogram/app.json

@@ -4,7 +4,6 @@
     "pages/profile/profile",
     "pages/calculator/calculator",
     "pages/unit-converter/unit-converter",
-    "pages/relative/relative",
     "pages/random-draw/random-draw",
     "pages/logs/logs",
     "pages/webview/webview"

games/minipro/calculation/miniprogram/pages/index/index.ts

@@ -64,12 +64,6 @@ Component({
         });
     },
 
-    goToRelativeCalculator() {
-        wx.navigateTo({
-            url: '/pages/relative/relative'
-        });
-    },
-
     goToRandomDraw() {
         wx.navigateTo({
             url: '/pages/random-draw/random-draw'

games/minipro/calculation/miniprogram/pages/index/index.wxml

@@ -43,17 +43,6 @@
                 </view>
             </view>
 
-            <!-- 亲戚称呼 -->
-            <view class="grid-item" bindtap="goToRelativeCalculator" hover-class="grid-item-hover">
-                <view class="icon-box bg-gradient-orange">
-                    <text class="icon">👋</text>
-                </view>
-                <view class="text-box">
-                    <text class="label">亲戚称呼</text>
-                    <text class="sub-label">拜年神器</text>
-                </view>
-            </view>
-
              <!-- 谁去拿外卖 -->
             <view class="grid-item" bindtap="goToRandomDraw" hover-class="grid-item-hover">
                 <view class="icon-box bg-gradient-purple">

games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxml

@@ -1,6 +1,7 @@
 <view class="container">
   <view class="header-tip">
-    <text>输入名字，看看今天谁是天选打工人</text>
+    <view class="title">🎲 天选打工人</view>
+    <text class="subtitle">输入名字，看看今天谁去拿外卖</text>
   </view>
 
   <view class="input-area">
@@ -8,26 +9,31 @@
     <view class="btn-add" bindtap="addName">添加</view>
   </view>
 
+  <view class="list-container">
+    <view class="list-header">候选名单 ({{names.length}})</view>
     <scroll-view scroll-y class="list-area">
       <view class="name-list">
         <block wx:for="{{names}}" wx:key="*this">
-        <view class="name-item">
+          <view class="name-item color-{{index % 5}}">
             <text class="name-text">{{item}}</text>
             <view class="btn-delete" bindtap="removeName" data-index="{{index}}">×</view>
           </view>
         </block>
         <view wx:if="{{names.length === 0}}" class="empty-tip">
-        <text>还没有候选人，快去添加吧</text>
+          <text class="empty-icon">🍃</text>
+          <text>还没有候选人，快去添加吧~</text>
         </view>
       </view>
     </scroll-view>
+  </view>
 
   <view class="result-area">
     <view class="result-box {{isRolling ? 'rolling' : ''}}">
+      <text class="result-label">🎉 天选之人</text>
       <text class="result-text">{{result || '?'}}</text>
     </view>
-    <button class="btn-start" bindtap="startDraw" disabled="{{isRolling || names.length < 2}}">
+    <button class="btn-start" hover-class="btn-start-hover" bindtap="startDraw" disabled="{{isRolling || names.length < 2}}">
-        {{isRolling ? '随机抽取中...' : '开始抽取'}}
+        {{isRolling ? '🤞 随机抽取中...' : '🚀 开始抽取'}}
     </button>
   </view>
 </view>

games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxss

@@ -1,6 +1,7 @@
 page {
-  background-color: #f6f7f9;
+  background: linear-gradient(180deg, #fce4ec 0%, #f3e5f5 100%);
   height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 .container {
@@ -13,9 +14,20 @@ page {
 
 .header-tip {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
-  color: #666;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #880e4f;
+  margin-bottom: 4px;
+}
+
+.subtitle {
   font-size: 14px;
+  color: #ad1457;
+  opacity: 0.7;
 }
 
 .input-area {
@@ -23,133 +35,201 @@ page {
   margin-bottom: 20px;
   background: #fff;
   border-radius: 50px;
-  padding: 5px;
+  padding: 6px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  box-shadow: 0 4px 12px rgba(173, 20, 87, 0.1);
+  border: 2px solid rgba(255,255,255,0.5);
 }
 
 .input {
   flex: 1;
-  height: 40px;
+  height: 44px;
   padding: 0 20px;
   font-size: 16px;
+  color: #333;
 }
 
 .btn-add {
-  width: 80px;
+  min-width: 80px;
-  height: 40px;
+  height: 44px;
-  line-height: 40px;
+  line-height: 44px;
   text-align: center;
-  background: #9c27b0;
+  background: linear-gradient(135deg, #ec407a, #d81b60);
   color: #fff;
   border-radius: 40px;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: bold;
+  box-shadow: 0 4px 8px rgba(216, 27, 96, 0.3);
+  transition: opacity 0.2s;
+}
+
+.btn-add:active {
+  opacity: 0.8;
+}
+
+.list-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 20px;
+  padding: 15px 15px 5px 15px; /* bottom padding smaller because scrollview */
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  min-height: 0; /* Important for flex child to scroll */
+}
+
+.list-header {
+  font-size: 14px;
+  color: #888;
+  margin-bottom: 10px;
+  padding-left: 5px;
 }
 
 .list-area {
   flex: 1;
-    background: #fff;
-    border-radius: 12px;
-    padding: 10px;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
   overflow: hidden;
 }
 
 .name-list {
   display: flex;
   flex-wrap: wrap;
+  align-content: flex-start; /* 防止换行后拉伸 */
   gap: 10px;
-    padding: 10px;
+  padding-bottom: 10px;
 }
 
 .name-item {
-    background: #f3e5f5;
+  padding: 8px 16px 8px 12px;
-    color: #4a148c;
-    padding: 8px 16px;
   border-radius: 20px;
   font-size: 14px;
   display: flex;
   align-items: center;
   position: relative;
+  font-weight: 500;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
+@keyframes popIn {
+  from { transform: scale(0.8); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+/* 伪随机颜色，根据 .color-0 到 .color-4 */
+.color-0 { background: #e3f2fd; color: #1565c0; }
+.color-1 { background: #e8f5e9; color: #2e7d32; }
+.color-2 { background: #fff3e0; color: #ef6c00; }
+.color-3 { background: #f3e5f5; color: #7b1fa2; }
+.color-4 { background: #ffebee; color: #c62828; }
+
 .name-text {
-    margin-right: 15px;
+  margin-right: 18px; /* 给关闭按钮留空间 */
 }
 
 .btn-delete {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
   width: 20px;
   height: 20px;
   line-height: 18px;
   text-align: center;
   border-radius: 50%;
-    background: rgba(0,0,0,0.1);
+  background: rgba(0,0,0,0.08);
-    color: #4a148c;
   font-size: 16px;
-    position: absolute;
+  font-weight: normal;
-    right: 5px;
-    top: 50%;
-    transform: translateY(-50%);
 }
+.btn-delete:active {
+  background: rgba(0,0,0,0.2);
+}
+
+.color-0 .btn-delete { color: #1565c0; }
+.color-1 .btn-delete { color: #2e7d32; }
+.color-2 .btn-delete { color: #ef6c00; }
+.color-3 .btn-delete { color: #7b1fa2; }
+.color-4 .btn-delete { color: #c62828; }
 
 .empty-tip {
   width: 100%;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   color: #999;
-    padding-top: 50px;
+  padding-top: 40px;
+}
+
+.empty-icon {
+  font-size: 40px;
+  margin-bottom: 10px;
+  opacity: 0.5;
 }
 
 .result-area {
-    height: 200px;
   display: flex;
   flex-direction: column;
-    justify-content: center;
   align-items: center;
+  padding-bottom: 20px;
 }
 
 .result-box {
-    width: 120px;
+  width: 100%;
-    height: 120px;
-    border-radius: 50%;
   background: #fff;
-    display: flex;
+  border-radius: 20px;
-    justify-content: center;
+  padding: 20px;
-    align-items: center;
+  text-align: center;
   margin-bottom: 20px;
-    border: 5px solid #e1bee7;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-    box-shadow: 0 4px 15px rgba(156, 39, 176, 0.2);
+  display: flex;
-    transition: all 0.1s;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 120px;
+  transition: transform 0.1s;
 }
 
 .result-box.rolling {
-    transform: scale(1.1);
+  transform: scale(0.98);
-    border-color: #9c27b0;
+  background: #fff8e1;
+}
+
+.result-label {
+  font-size: 13px;
+  color: #999;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 .result-text {
-    font-size: 24px;
+  font-size: 32px;
-    font-weight: bold;
+  font-weight: 800;
   color: #333;
   /* Prevent long names from overflowing */
-    max-width: 90%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .btn-start {
-    width: 80% !important;
+  width: 100% !important;
-    background: linear-gradient(135deg, #ab47bc 0%, #8e24aa 100%);
+  background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
   color: #fff;
-    border-radius: 30px;
+  border-radius: 50px;
-    padding: 12px 0;
+  padding: 14px 0;
   font-size: 18px;
-    box-shadow: 0 4px 15px rgba(142, 36, 170, 0.4);
+  font-weight: bold;
+  box-shadow: 0 8px 20px rgba(74, 20, 140, 0.4);
+  transition: all 0.2s;
+}
+
+.btn-start-hover {
+  transform: translateY(2px);
+  box-shadow: 0 4px 10px rgba(74, 20, 140, 0.3);
 }
 
 .btn-start[disabled] {
-    opacity: 0.7;
+  opacity: 0.6;
-    background: #ccc; 
+  background: #9e9e9e; 
   box-shadow: none;
+  transform: none;
 }

games/minipro/calculation/miniprogram/pages/relative/relative.json

@@ -1,4 +0,0 @@
-{
-  "usingComponents": {},
-  "navigationBarTitleText": "亲戚称呼计算器"
-}

games/minipro/calculation/miniprogram/pages/relative/relative.ts

@@ -1,152 +0,0 @@
-
-/* Simplified Relationship Data */
-const relationships: Record<string, string> = {
-    'default': '我',
-    'f': '父亲',
-    'm': '母亲',
-    'h': '丈夫',
-    'w': '妻子',
-    's': '儿子',
-    'd': '女儿',
-    'ob': '哥哥',
-    'yb': '弟弟',
-    'os': '姐姐',
-    'ys': '妹妹',
-
-    'f,f': '爷爷',
-    'f,m': '奶奶',
-    'f,h': '爸爸', // redundancy
-    'f,w': '妈妈', // redundancy
-    'f,s': '兄弟', // Context dependent, usually brother or self
-    'f,d': '姐妹', 
-    'f,ob': '伯父',
-    'f,yb': '叔叔',
-    'f,os': '姑妈',
-    'f,ys': '姑姑',
-
-    'm,f': '姥爷',
-    'm,m': '姥姥',
-    'm,ob': '舅舅',
-    'm,yb': '舅舅',
-    'm,os': '姨妈',
-    'm,ys': '姨妈',
-
-    'f,f,f': '太爷爷',
-    'f,f,m': '太奶奶',
-    'f,m,f': '太姥爷',
-    'f,m,m': '太姥姥',
-    
-    'h,f': '公公',
-    'h,m': '婆婆',
-    'w,f': '岳父',
-    'w,m': '岳母',
-    
-    'ob,w': '嫂子',
-    'yb,w': '弟妹',
-    'os,h': '姐夫',
-    'ys,h': '妹夫',
-    
-    'f,ob,w': '伯母',
-    'f,yb,w': '婶婶',
-    'f,os,h': '姑父',
-    'f,ys,h': '姑父',
-
-    'm,ob,w': '舅妈',
-    'm,yb,w': '舅妈',
-    'm,os,h': '姨父',
-    'm,ys,h': '姨父'
-};
-
-/* Reverse lookup or more complex logic could be added here */
-
-Page({
-  data: {
-    screenText: '我', // Display the chain: 父亲 的 母亲
-    resultText: '', // Display the result: 奶奶
-    currentChain: [] as string[], // Stores codes: ['f', 'm']
-    gender: 1, // 1: Male, 0: Female (of the user)
-    
-    buttons: [
-      { text: '父', id: 'f' },
-      { text: '母', id: 'm' },
-      { text: '夫', id: 'h' },
-      { text: '妻', id: 'w' },
-      { text: '儿', id: 's' },
-      { text: '女', id: 'd' },
-      { text: '兄', id: 'ob' },
-      { text: '弟', id: 'yb' },
-      { text: '姐', id: 'os' },
-      { text: '妹', id: 'ys' }
-    ]
-  },
-
-  onLoad() {
-      
-  },
-
-  handleBtnClick(e: any) {
-      const id = e.currentTarget.dataset.id;
-      const text = e.currentTarget.dataset.text;
-      
-      const newChain = [...this.data.currentChain, id];
-      const newScreenText = this.data.currentChain.length === 0 ? text : this.data.screenText + ' 的 ' + text;
-      
-      this.setData({
-          currentChain: newChain,
-          screenText: newScreenText
-      });
-      
-      this.calculate(newChain);
-  },
-  
-  handleBack() {
-      if (this.data.currentChain.length === 0) return;
-      
-      const newChain = [...this.data.currentChain];
-      newChain.pop();
-      
-      let newScreenText = '我';
-      if (newChain.length > 0) {
-          // Rebuild text
-          newScreenText = newChain.map(code => {
-              const btn = this.data.buttons.find(b => b.id === code);
-              return btn ? btn.text : '';
-          }).join(' 的 ');
-      }
-      
-      this.setData({
-          currentChain: newChain,
-          screenText: newScreenText
-      });
-      
-      if (newChain.length > 0) {
-        this.calculate(newChain);
-      } else {
-          this.setData({ resultText: '' });
-      }
-  },
-  
-  handleClear() {
-      this.setData({
-          currentChain: [],
-          screenText: '我',
-          resultText: ''
-      });
-  },
-  
-  calculate(chain: string[]) {
-      const key = chain.join(',');
-      const result = relationships[key];
-      
-      if (result) {
-          this.setData({ resultText: result });
-      } else {
-          this.setData({ resultText: '未知亲戚 / 关系太远' });
-      }
-  },
-  
-  switchGender() {
-      this.setData({ gender: this.data.gender === 1 ? 0 : 1 });
-      // Might affect initial 'Me' context if we expand logic
-  }
-});

games/minipro/calculation/miniprogram/pages/relative/relative.wxml

@@ -1,19 +0,0 @@
-<view class="container">
-  <view class="display-area">
-    <view class="chain-text">{{screenText}}</view>
-    <view class="result-text">{{resultText}}</view>
-  </view>
-
-  <view class="control-area">
-    <view class="action-bar">
-      <button class="action-btn" bindtap="handleBack">回退</button>
-      <button class="action-btn" bindtap="handleClear">清空</button>
-    </view>
-    
-    <view class="grid-keyboard">
-      <block wx:for="{{buttons}}" wx:key="id">
-        <button class="key-btn" bindtap="handleBtnClick" data-id="{{item.id}}" data-text="{{item.text}}">{{item.text}}</button>
-      </block>
-    </view>
-  </view>
-</view>

games/minipro/calculation/miniprogram/pages/relative/relative.wxss

@@ -1,64 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background-color: #f6f6f6;
-}
-
-.display-area {
-  flex: 1;
-  background-color: #fff;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-}
-
-.chain-text {
-  font-size: 18px;
-  color: #666;
-  margin-bottom: 20px;
-  word-break: break-all;
-  text-align: right;
-}
-
-.result-text {
-  font-size: 32px;
-  color: #333;
-  font-weight: bold;
-}
-
-.control-area {
-  background-color: #e0e0e0;
-  padding: 10px;
-  padding-bottom: 40px; /* Safe area for some phones */
-}
-
-.action-bar {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.action-btn {
-  background-color: #f8f8f8;
-  color: #f00;
-  width: 48%;
-}
-
-.grid-keyboard {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
-}
-
-.key-btn {
-  background-color: #fff;
-  height: 60px;
-  line-height: 60px;
-  text-align: center;
-  font-size: 18px;
-  border-radius: 5px;
-  padding: 0;
-}

games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxml

@@ -1,31 +1,49 @@
 <view class="container">
-  <view class="section">
+  <!-- 顶部类型选择 -->
+  <view class="header-section">
     <picker bindchange="bindCategoryChange" value="{{categoryIndex}}" range="{{categories}}">
-      <view class="picker">
+      <view class="category-picker">
-        当前分类：{{categories[categoryIndex]}}
+        <text class="label">当前换算</text>
+        <text class="value">{{categories[categoryIndex]}}</text>
+        <text class="arrow">▼</text>
       </view>
     </picker>
   </view>
 
-  <view class="converter-box">
+  <view class="converter-card">
-    <view class="input-group">
+    <!-- 输入区域 -->
-      <input type="digit" placeholder="输入数值" bindinput="bindInput" value="{{inputValue}}" />
+    <view class="conversion-row input-row">
-      <picker bindchange="bindFromUnitChange" value="{{fromIndex}}" range="{{currentUnits}}" range-key="name">
+      <view class="row-label">输入</view>
-        <view class="unit-picker">
+      <view class="row-content">
-          {{currentUnits[fromIndex].name}}
+        <input class="value-input" type="digit" placeholder="0" bindinput="bindInput" value="{{inputValue}}" />
+        <picker class="unit-selector" bindchange="bindFromUnitChange" value="{{fromIndex}}" range="{{currentUnits}}" range-key="name">
+          <view class="unit-text">
+            {{currentUnits[fromIndex].name}} <text class="unit-arrow">▼</text>
           </view>
         </picker>
       </view>
+    </view>
 
-    <view class="separator">=</view>
+    <!-- 分割线/转换图标 -->
+    <view class="divider">
+      <view class="icon-transfer">⇅</view>
+    </view>
 
-    <view class="input-group">
+    <!-- 输出区域 -->
-      <view class="result-display">{{outputValue}}</view>
+    <view class="conversion-row output-row">
-      <picker bindchange="bindToUnitChange" value="{{toIndex}}" range="{{currentUnits}}" range-key="name">
+      <view class="row-label">结果</view>
-        <view class="unit-picker">
+      <view class="row-content">
-          {{currentUnits[toIndex].name}}
+        <view class="value-display">{{outputValue || '0'}}</view>
+        <picker class="unit-selector" bindchange="bindToUnitChange" value="{{toIndex}}" range="{{currentUnits}}" range-key="name">
+          <view class="unit-text">
+            {{currentUnits[toIndex].name}} <text class="unit-arrow">▼</text>
           </view>
         </picker>
       </view>
     </view>
   </view>
+
+  <view class="tips">
+    点击单位或数字进行修改
+  </view>
+</view>

games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxss

@@ -1,56 +1,151 @@
+page {
+  background-color: #f7f8fa;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
 .container {
   padding: 20px;
+  max-width: 600px;
+  margin: 0 auto;
 }
 
-.section {
+/* 顶部选择区 */
-  background: #f0f0f0;
+.header-section {
-  border-radius: 8px;
+  margin-bottom: 24px;
-  margin-bottom: 20px;
+  display: flex;
-  padding: 10px;
+  justify-content: center;
-  text-align: center;
 }
 
-.picker {
+.category-picker {
-  font-size: 18px;
+  background: #ffffff;
+  padding: 10px 24px;
+  border-radius: 50px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  gap: 10px;
   color: #333;
 }
 
-.converter-box {
+.category-picker .label {
+  font-size: 14px;
+  color: #888;
+}
+
+.category-picker .value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #007aff;
+}
+
+.category-picker .arrow {
+  font-size: 12px;
+  color: #ccc;
+}
+
+/* 核心转换卡片 */
+.converter-card {
+  background: #ffffff;
+  border-radius: 20px;
+  padding: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
   display: flex;
   flex-direction: column;
-  gap: 20px;
 }
 
-.input-group {
+.conversion-row {
+  padding: 20px;
+  position: relative;
+}
+
+.input-row {
+  background-color: #fff;
+  border-radius: 16px 16px 4px 4px;
+}
+
+.output-row {
+  background-color: #f9fbfd; /* 稍微不同的背景色区分输入输出 */
+  border-radius: 4px 4px 16px 16px;
+}
+
+.row-label {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.row-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.value-input, .value-display {
+  flex: 1;
+  font-size: 32px;
+  font-weight: 500;
+  color: #333;
+  height: 48px;
+  line-height: 48px;
+  min-width: 0; /* 防止flex子项溢出 */
+}
+
+.value-display {
+  color: #007aff; /* 结果颜色高亮 */
+}
+
+/* 单位选择器 */
+.unit-selector {
+  margin-left: 15px;
+}
+
+.unit-text {
   display: flex;
   align-items: center;
-  border: 1px solid #ddd;
+  gap: 6px;
-  border-radius: 8px;
+  padding: 8px 16px;
-  padding: 10px;
+  background-color: #f0f2f5;
-  background: #fff;
+  border-radius: 12px;
-}
-
-.input-group input, .result-display {
-  flex: 1;
-  font-size: 24px;
-  height: 40px;
-  line-height: 40px;
-}
-
-.result-display {
-    min-height: 40px; 
-}
-
-.unit-picker {
-  margin-left: 10px;
-  padding: 5px 10px;
-  background: #eee;
-  border-radius: 4px;
   font-size: 16px;
+  color: #444;
+  font-weight: 500;
+  transition: background-color 0.2s;
 }
 
-.separator {
+.unit-text:active {
-  text-align: center;
+  background-color: #e1e4e8;
-  font-size: 30px;
+}
-  color: #999;
+
+.unit-arrow {
+  font-size: 10px;
+  color: #888;
+}
+
+/* 分割线和图标 */
+.divider {
+  height: 1px;
+  background-color: #eee;
+  margin: 0 20px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-transfer {
+  position: absolute;
+  background: #fff;
+  color: #ccc;
+  font-size: 20px;
+  padding: 0 10px;
+  top: -14px;
+}
+
+.tips {
+  text-align: center;
+  margin-top: 30px;
+  font-size: 13px;
+  color: #ccc;
 }