| | |
|---|
| | | <template>
|
|---|
| | | <div class="AuthorizationManagement">AuthorizationManagement</div>
|
|---|
| | | <div class="AuthorizationManagement">
|
|---|
| | | <div class="content">
|
|---|
| | | <div class="title">设备授权管理</div>
|
|---|
| | |
|
|---|
| | | <div class="formArea">
|
|---|
| | | <div class="formHeader">
|
|---|
| | | <div class="headerItem">授权设备ID</div>
|
|---|
| | | <div class="headerItem">授权时间</div>
|
|---|
| | | <div class="headerItem">解除授权</div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="formBody">
|
|---|
| | | <div
|
|---|
| | | class="formItem"
|
|---|
| | | v-for="(item, index) in authorizationList"
|
|---|
| | | :key="index"
|
|---|
| | | >
|
|---|
| | | <div class="id">
|
|---|
| | | {{ item.id }}
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="time">
|
|---|
| | | {{ item.time }}
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="unbind iconfont" @click="isShowUnbindBox = true">
|
|---|
| | | 
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <UnbindBox
|
|---|
| | | v-if="isShowUnbindBox"
|
|---|
| | | @close="isShowUnbindBox = false"
|
|---|
| | | ></UnbindBox>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | export default {};
|
|---|
| | | import UnbindBox from "@/pages/settings/components/UnbindBox";
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | isShowUnbindBox: false,
|
|---|
| | | authorizationList: [
|
|---|
| | | {
|
|---|
| | | id: "DSVAD010120190621",
|
|---|
| | | time: "2019-08-02 12:43:43",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | id: "DSVAD010120190621",
|
|---|
| | | time: "2019-08-02 12:43:43",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | id: "DSVAD010120190621",
|
|---|
| | | time: "2019-08-02 12:43:43",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | id: "DSVAD010120190621",
|
|---|
| | | time: "2019-08-02 12:43:43",
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | components: {
|
|---|
| | | UnbindBox,
|
|---|
| | | },
|
|---|
| | | };
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style>
|
|---|
| | | <style lang="scss" scoped>
|
|---|
| | | .AuthorizationManagement {
|
|---|
| | | position: relative;
|
|---|
| | |
|
|---|
| | | .content {
|
|---|
| | | width: 456px;
|
|---|
| | | margin: 0 auto;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .title {
|
|---|
| | | height: 48px;
|
|---|
| | | font-size: 16px;
|
|---|
| | | line-height: 48px;
|
|---|
| | | color: #4f4f4f;
|
|---|
| | | font-weight: bold;
|
|---|
| | | background: #f2f2f7;
|
|---|
| | | border-radius: 8px;
|
|---|
| | | margin-bottom: 4px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .formArea {
|
|---|
| | | overflow: hidden;
|
|---|
| | | margin-top: 4px;
|
|---|
| | | background: #f2f2f7;
|
|---|
| | |
|
|---|
| | | .formHeader {
|
|---|
| | | margin: 8px 30px 10px 30px;
|
|---|
| | | display: flex;
|
|---|
| | | justify-content: space-between;
|
|---|
| | | font-size: 14px;
|
|---|
| | | color: #666;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .formBody {
|
|---|
| | | padding-bottom: 8px;
|
|---|
| | | border-radius: 8px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .formItem {
|
|---|
| | | box-sizing: border-box;
|
|---|
| | | padding-left: 10px;
|
|---|
| | | padding-right: 42px;
|
|---|
| | | margin: 0 20px 8px 20px;
|
|---|
| | | display: flex;
|
|---|
| | | height: 32px;
|
|---|
| | | justify-content: space-between;
|
|---|
| | | align-items: center;
|
|---|
| | | font-size: 12px;
|
|---|
| | | color: #333;
|
|---|
| | | font-weight: 700;
|
|---|
| | | background-color: #fff;
|
|---|
| | | border-radius: 20px;
|
|---|
| | |
|
|---|
| | | .unbind {
|
|---|
| | | font-size: 24px;
|
|---|
| | | color: rgb(78, 148, 255);
|
|---|
| | | cursor: pointer;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style> |
|---|
