details.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <!-- 可视监控详情 -->
  3. <view class="page-panel">
  4. <!-- 监控区域 -->
  5. <view class="monitor-area">
  6. <image src="@/static/demo/demo1.png" mode="widthFix"></image>
  7. </view>
  8. <!-- 监控工具 -->
  9. <view class="monitor-tools">
  10. <view class="row-center tools-btn">
  11. <text>+</text>
  12. </view>
  13. <view class="tools-control">
  14. <view class="slice up"></view>
  15. <view class="slice down"></view>
  16. <view class="slice left"></view>
  17. <view class="slice right"></view>
  18. <view class="tools-btn"></view>
  19. </view>
  20. <view class="row-center tools-btn">
  21. <text>━</text>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. export default {
  28. data() {
  29. return {
  30. };
  31. }
  32. }
  33. </script>
  34. <style lang="scss">
  35. // 监控区域
  36. .monitor-area {
  37. overflow: hidden;
  38. height: 510rpx;
  39. border-radius: 5rpx;
  40. margin-bottom: 24rpx;
  41. }
  42. .monitor-tools {
  43. display: flex;
  44. align-items: center;
  45. justify-content: space-between;
  46. padding: 24rpx;
  47. }
  48. .tools-control {
  49. position: relative;
  50. width: 305rpx;
  51. height: 305rpx;
  52. margin: 0 60rpx;
  53. background-image: linear-gradient(to right, #323e4d, #444d5e);
  54. border-radius: 100%;
  55. .tools-btn {
  56. position: absolute;
  57. top: 0;
  58. bottom: 0;
  59. left: 0;
  60. right: 0;
  61. margin: auto;
  62. }
  63. .slice {
  64. position: absolute;
  65. display: flex;
  66. align-items: center;
  67. justify-content: center;
  68. width: 97rpx;
  69. height: 97rpx;
  70. margin: auto;
  71. &:before {
  72. content: '';
  73. display: block;
  74. width: 0;
  75. margin-right: -24rpx;
  76. border-color: transparent transparent transparent $color-primary;
  77. border-width: 24rpx;
  78. border-style: solid;
  79. transform: scaleY(0.6);
  80. }
  81. &:active {
  82. opacity: .3;
  83. }
  84. }
  85. .up {
  86. top: 0;
  87. left: 0;
  88. right: 0;
  89. transform: rotateZ(-90deg);
  90. }
  91. .down {
  92. bottom: 0;
  93. left: 0;
  94. right: 0;
  95. transform: rotateZ(90deg);
  96. }
  97. .left {
  98. top: 0;
  99. bottom: 0;
  100. left: 0;
  101. transform: rotateZ(180deg);
  102. }
  103. .right {
  104. top: 0;
  105. bottom: 0;
  106. right: 0;
  107. }
  108. }
  109. .tools-btn {
  110. width: 110rpx;
  111. height: 110rpx;
  112. font-size: 40rpx;
  113. font-weight: bold;
  114. color: $color-primary;
  115. line-height: 1;
  116. background: #434C5D;
  117. border-radius: 100%;
  118. &:active {
  119. text {
  120. opacity: .3;
  121. }
  122. }
  123. }
  124. </style>