| | |
|---|
| | | <div class="full-screen-container"> |
|---|
| | | <router-view class="router-view"> |
|---|
| | | <template v-slot:function> |
|---|
| | | <a-space> |
|---|
| | | <button class="button" @click="handleLogout">切换用户</button> |
|---|
| | | <button class="button" @click="backToIndex">返回主页</button> |
|---|
| | | <button class="button">设置</button> |
|---|
| | | <a-space class="common-button-container"> |
|---|
| | | <a-button type="primary" @click="handleLogout" size="large">切换用户</a-button> |
|---|
| | | <a-button @click="backToIndex" size="large">返回主页</a-button> |
|---|
| | | <!--<button class="button">设置</button>--> |
|---|
| | | </a-space> |
|---|
| | | </template> |
|---|
| | | </router-view> |
|---|
| | | |
|---|
| | | <div class="footer" v-if="$route.path!=='/terminal/login'"> |
|---|
| | | <div>姓名：{{nickname()}}</div> |
|---|
| | | <div>当前时间：{{currentDateAndTime}}</div> |
|---|
| | | <!--<div>姓名：{{nickname()}}</div>--> |
|---|
| | | <div>{{currentDateAndTime}}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | height: 100vh; |
|---|
| | | background-color: #fff; |
|---|
| | | |
|---|
| | | .router-view { |
|---|
| | | flex: 1; |
|---|
| | | padding: 24px; |
|---|
| | | padding: 1.25vw; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .button { |
|---|
| | | font-weight: bold; |
|---|
| | | padding: 15px 15px; |
|---|
| | | border: 1px solid rgba(0, 0, 0, .2); |
|---|
| | | border-radius: 5px; |
|---|
| | | cursor: pointer; |
|---|
| | | box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.2), |
|---|
| | | -6px -6px 16px rgba(255, 255, 255, 0.8), |
|---|
| | | inset 0 0 0 transparent; |
|---|
| | | |
|---|
| | | &:hover { |
|---|
| | | box-shadow: 0 0 0 transparent, |
|---|
| | | inset 6px 6px 12px rgba(0, 0, 0, 0.2), |
|---|
| | | inset -6px -6px 12px rgba(255, 255, 255, 0.8); |
|---|
| | | } |
|---|
| | | .common-button-container { |
|---|
| | | margin-bottom: 1vw; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | font-size: 16px; |
|---|
| | | padding: 12px 24px; |
|---|
| | | font-size: 0.8vw; |
|---|
| | | padding: 0.5vw 0; |
|---|
| | | color: #000; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | /*font-weight: bold;*/ |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
