基金grid+增刪修UI

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<fieldset class="fidset">
    <legend>
    	<span class="stitle">
        <i class="fa fa-stop" aria-hidden="true"></i> 保守型
      </span>
    </legend>
    <div style="text-align:right;margin-bottom:3px;">
      <button type="button" class="funbtn-blue-xs"><i class="fa fa-plus" aria-hidden="true"></i> 新增</button>
    </div>
    <table class="datagrid">
  <thead>
    <tr>
      <th>序號</th>
      <th>基金特色</th>
      <th>基金代碼</th>
      <th>基金名稱</th>
      <th>基金警語</th>
      <th>功能</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>James</td>
      <td>Matman</td>
      <td>Chief Sandwich Eater</td>
      <td>@james</td>
      <td>
        <button type="button" class="funbtn-orange-xs"><i class="fa fa-paint-brush" aria-hidden="true"></i> 修改</button>
        <button type="button" class="funbtn-red-xs"><i class="fa fa-trash-o" aria-hidden="true"></i> 刪除</button>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>2</td>
      <td>Andor</td>
      <td>Nagy</td>
      <td>Designer</td>
      <td>@andornagy</td>
      <td>
        <button type="button" class="funbtn-orange-xs"><i class="fa fa-paint-brush" aria-hidden="true"></i> 修改</button>
        <button type="button" class="funbtn-red-xs"><i class="fa fa-trash-o" aria-hidden="true"></i> 刪除</button>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>3</td>
      <td>Tamas</td>
      <td>Biro</td>
      <td>Game Tester</td>
      <td>@tamas</td>
      <td>
        <button type="button" class="funbtn-orange-xs"><i class="fa fa-paint-brush" aria-hidden="true"></i> 修改</button>
        <button type="button" class="funbtn-red-xs"><i class="fa fa-trash-o" aria-hidden="true"></i> 刪除</button>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>4</td>
      <td>Zoli</td>
     ...

CSS

/*legend title*/
span.stitle{
  color:#0066cc;
  font-weight: bold;
  background-color: #ffffb3;
  font-size: 1.2em;
}
/*fieldset*/
.fidset
{
  border:2px solid #0066cc;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;	
    border-radius:8px;	
}
body{
  font-family: 微軟正黑體, Verdana, Arial;
}
/*data grid*/    
table.datagrid {
  border-collapse: collapse;
  align-self: center;
  width: 100%;  
}

table.datagrid, .datagrid th, .datagrid td {
  text-align: center;
  padding: 8px;
  border: 1px solid #ddd;
}

table.datagrid th {
  background-color: #7095F6;
  color: white;
}

table.datagrid tbody:nth-child(even) {background-color: #f2f2f2;}
/*input*/
.input-xs {
    height: 25px;
    line-height: 1.5;
    font-size: 13px;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 微軟正黑體, Verdana, Arial;
}
/*button*/
.funbtn-grey-xs {
  background-color: #8E9297;
  border: none;
  color: white;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 微軟正黑體, Verdana, Arial;
}

.funbtn-orange-xs {
  background-color: #EDAE4D;
  border: none;
  color: white;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 微軟正黑體, Verdana, Arial;
}

.funbtn-red-xs {
  background-color: #F1322C;
  border: none;
  color: white;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 微軟正黑體, Verdana, Arial;
}

.funbtn-blue-xs {
  background-color: #2F7EC9;
  border: none;
  color: white;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 微軟正黑體, Verdana, Arial;
}