tools项目-在线指数

htmldev/TBTools/src/views/modules/tools/tools-credit.vue

@@ -1,13 +1,249 @@
 <template>
-  <div>tools-credit</div>
+  <el-row>
+    <el-col :span="12" :offset="6">
+      <el-form :model="formData">
+        <el-form-item>
+          <el-input placeholder="输入淘宝旺旺账号" clearable v-model="formData.search"></el-input>
+          <el-button type="primary" @click="onSubmit">立即查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <el-col>
+      <p class="TT-label">用户基本信息</p>
+      <table class="basic_table">
+        <tbody>
+        <tr>
+          <td class="key">旺旺号：</td>
+          <td class="value"></td>
+          <td class="key">性别：</td>
+          <td class="value"></td>
+          <td class="key">买家信誉：</td>
+          <td class="value"></td>
+          <td class="key">认证：</td>
+          <td class="value"></td>
+        </tr>
+        <tr>
+          <td class="key">会员级别：</td>
+          <td class="value"></td>
+          <td class="key">活跃度：</td>
+          <td class="value"></td>
+          <td class="key">好评率：</td>
+          <td class="value"></td>
+          <td class="key">每周平均信誉点击：</td>
+          <td class="value"></td>
+        </tr>
+        <tr>
+          <td class="key">每月平均信誉点击：</td>
+          <td class="value"></td>
+          <td class="key">淘龄（天）：</td>
+          <td class="value"></td>
+          <td class="key">淘气值：</td>
+          <td class="value"></td>
+          <td class="key">注册地区：</td>
+          <td class="value"></td>
+        </tr>
+        <tr>
+          <td class="key">注册时间：</td>
+          <td class="value"></td>
+          <td class="key">最后登录：</td>
+          <td class="value"></td>
+          <td class="key">信誉月涨幅：</td>
+          <td class="value"></td>
+          <td class="key">总查询次数：</td>
+          <td class="value"></td>
+        </tr>
+        </tbody>
+      </table>
+      <div class="remark">
+        温馨提示：一周信用点数超过20点(常购物的买家大号除外)，有可能这个号被淘宝列入黑名单，他再拍的东西有可能会被认为虚假交易，<span style="color: red;">卖家会有降权危险</span></div>
+    </el-col>
+    <el-col>
+      <div class="query">
+        <p class="TT-label">查询次数</p>
+        <span style="color: red; font-size: 12px;">（此用户旺旺号被查询的次数）</span>
+        <table class="query_table">
+          <tbody>
+          <tr>
+            <td class="key">当天</td>
+            <td class="key">最近3天</td>
+            <td class="key">最近7天</td>
+            <td class="key">最近30天</td>
+          </tr>
+          <tr>
+            <td class="value"></td>
+            <td class="value"></td>
+            <td class="value"></td>
+            <td class="value"></td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </el-col>
+    <el-col>
+      <div class="info">
+        <p class="TT-label">举报信息</p>
+        <table class="report_table">
+          <tbody>
+          <tr>
+            <td class="key">差评</td>
+            <td class="key">打假</td>
+            <td class="key">违规</td>
+            <td class="key">降权</td>
+            <td class="key">找茬</td>
+            <td class="key">抽检</td>
+            <td class="key">退款</td>
+            <td class="key">其他</td>
+          </tr>
+          <tr>
+            <td class="value">0</td>
+            <td class="value">0</td>
+            <td class="value">0</td>
+            <td class="value">0</td>
+            <td class="value">0</td>
+            <td class="value">0</td>
+            <td class="value">0</td>
+            <td class="value">0</td>
+          </tr>
+          </tbody>
+        </table>
+        <div class="remark">
+          温馨提示： 请根据上述被标记情况做分辨；谨慎交易，避免不必要的麻烦！
+        </div>
+      </div>
+    </el-col>
+    <el-col>
+      <div class="safety">
+        <p class="TT-label">安全评估</p>
+        <table class="safety_table ">
+          <tbody>
+          <tr>
+            <td class="key">综合评分：</td>
+            <td class="value"></td>
+            <td class="key">安全等级：</td>
+            <td class="value"></td>
+          </tr>
+          <tr>
+            <td class="key">上次查询时间：</td>
+            <td class="value"></td>
+            <td class="key">本次查询时间：</td>
+            <td class="value"></td>
+          </tr>
+          <tr style="display: none;">
+            <td class="key">上次查询IP：</td>
+            <td class="value"></td>
+            <td class="key">本次查询IP：</td>
+            <td class="value"></td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 export default {
-  name: 'toolsCredit'
+  name: 'toolsCredit',
+  data () {
+    return {
+      formData: {
+        search: ''
+      }
+    }
+  },
+  methods: {
+    onSubmit () {}
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+$--color-primary: #3E8EF7;
+/deep/ .el-form-item {
+  .el-form-item__content {
+    display: flex;
+    align-items: center;
 
+    input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border: 1px solid $--color-primary;
+    }
+
+    button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+
+.TT-label {
+  height: 25px;
+  background-color: #0099FF;
+  color: #fff;
+  display: inline-block;
+  padding: 5px 10px;
+  width: fit-content;
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+  line-height: 16px;
+  font-size: 16px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  td {
+    border: 1px solid #0099FF;
+    height: 42px;
+    width: 120px;
+  }
+
+  .key {
+    background-color: #E6F1F8;
+    text-align: center;
+    width: 80px;
+  }
+
+  .value {
+    text-align: center;
+  }
+}
+
+
+.remark {
+  color: #555555;
+  padding: 7px;
+  font-size: 14px;
+  background-color: #FBF1E7;
+}
+
+.query {
+  margin-top: 30px;
+  margin-bottom: 45px;
+}
+
+.info {
+  margin-bottom: 45px;
+
+  .content {
+    height: 60px;
+    width: 100%;
+    border: 1px solid #E5E5E5;
+    display: flex;
+    font-size: 14px;
+    padding: 17px;
+    justify-content: flex-start;
+  }
+
+  .item {
+    padding-right: 15px;
+  }
+}
+
+
+.safety {
+  margin-bottom: 45px;
+}
 </style>