| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="image-container"> |
| | | <img class="bottom-image" src="../assets/images/shouye.png" alt="Bottom Image"> |
| | | </div> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | |
| | | export default { |
| | | name: "App", |
| | | dicts: ['sys_normal_disable'], |
| | | data(){ |
| | | return { |
| | | |
| | | }; |
| | | } |
| | | |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .app-container{ |
| | | background-color: #FEF7FC; |
| | | } |
| | | .image-container { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .bottom-image { |
| | | z-index: -1; /* 设置底层图片的层级为1 */ |
| | | width: 100%; |
| | | height: 100%; |
| | | /*position: absolute;*/ |
| | | top: 0; |
| | | } |
| | | .text-box1 { |
| | | position: absolute; |
| | | top: 17.5%; |
| | | left: 47.5%; |
| | | transform: translate(-50%, -50%); |
| | | width: 320px; |
| | | |
| | | } |
| | | .text-box1 ::placeholder{ |
| | | color:#000000; |
| | | font-size: 15px; |
| | | font-family: Microsoft YaHei UI-Light, Microsoft YaHei UI; |
| | | } |
| | | .text-box2 { |
| | | position: absolute; |
| | | top: 51%; |
| | | left: 80%; |
| | | transform: translate(-50%, -50%); |
| | | width: 345px; |
| | | } |
| | | .text-box2 ::placeholder{ |
| | | color:#000000; |
| | | font-size: 15px; |
| | | font-family: Microsoft YaHei UI-Light, Microsoft YaHei UI; |
| | | } |
| | | </style> |