1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <template>
- <view class="img-wrap">
- <view v-for="(item, index) in 19" :style="{ left: 65 + (item - 1) * 66 + 'rpx' }" class="item success"></view>
- <view v-for="(item, index) in 21" :style="{ left: 65 + (item - 1) * 66 + 'rpx' }" class="item1 error"></view>
- <view v-for="(item, index) in 4" :style="{ left: 126 + (item - 1) * 47 + 'rpx', borderRadius: '16rpx' }" class="item2 success"></view>
- <view :style="{ left: '340rpx', borderRadius: '16rpx' }" class="item2 success"></view>
- <view v-for="(item, index) in 7" :style="{ left: 414 + (item - 1) * 48 + 'rpx' }" class="item2 success"></view>
- <view v-for="(item, index) in 7" :style="{ left: 774 + (item - 1) * 48 + 'rpx' }" class="item2 error"></view>
- <view v-for="(item, index) in 4" :style="{ left: '1136rpx' }" class="item2 success"></view>
- <view v-for="(item, index) in 4" :style="{ left: 1212 + (item - 1) * 47 + 'rpx', borderRadius: '16rpx' }" class="item2 success"></view>
- <image mode="heightFix" src="@/static/electron-picture/p-1200.jpg" alt="" />
- </view>
- </template>
- <script>
- export default {
- data() {
- return {}
- }
- }
- </script>
- <style scoped lang="scss">
- .img-wrap {
- position: relative;
- overflow-x: scroll;
- padding-right: 49rpx;
-
- .item {
- width: 37rpx;
- height: 77rpx;
- position: absolute;
- top: 125rpx;
- left: 63rpx;
- border-radius: 8rpx;
- z-index: 999;
- }
-
- .item1 {
- width: 37rpx;
- height: 77rpx;
- position: absolute;
- top: 500rpx;
- left: 63rpx;
- border-radius: 8rpx;
- z-index: 999;
- }
-
- .item2 {
- width: 37rpx;
- height: 77rpx;
- position: absolute;
- top: 846rpx;
- left: 63rpx;
- border-radius: 8rpx;
- z-index: 999;
- }
-
- .success {
- background-color: #00BD00;
- }
-
- .error {
- background-color: #D6000F;
- }
-
- image {
- height: 1095rpx;
- }
- }
- </style>
|