jiance.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <view class="container">
  3. <div class="jc" v-for="item in 8" :key="item">
  4. <image class="xc" src="../../static/img/xc.png" mode="aspectFit"></image>
  5. <checkbox class="xz"></checkbox>
  6. </div>
  7. <view class="all"></view>
  8. <view class="sc" @click="chooseImage">
  9. <button class="dele">删除</button>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. deleteList:[]
  18. }
  19. },
  20. onShow() {
  21. },
  22. methods: {
  23. chooseImage() {
  24. }
  25. }
  26. };
  27. </script>
  28. <style lang="scss">
  29. .container {
  30. min-height: 100%;
  31. background-color: #fff;
  32. position: relative;
  33. display: flex;
  34. flex-wrap: wrap;
  35. .jc {
  36. background-color: #fff;
  37. position: relative;
  38. display: flex;
  39. .xc {
  40. width: 360rpx;
  41. height: 477rpx;
  42. padding: 20rpx 10rpx 10rpx 20rpx;
  43. }
  44. .xz {
  45. position: absolute;
  46. top: 200px;
  47. right: 19px;
  48. // height: 30px;
  49. }
  50. }
  51. .all {
  52. width: 750rpx;
  53. height: 80rpx;
  54. }
  55. .sc {
  56. width: 750rpx;
  57. height: 100rpx;
  58. position: fixed;
  59. bottom: 0rpx;
  60. display: flex;
  61. align-items: center;
  62. // background-color: #EEEEEE;
  63. background-color: #fff;
  64. .dele {
  65. background-color: #FF6F0F;
  66. width: 160rpx;
  67. height: 64rpx;
  68. border-radius: 32rpx;
  69. color: #fff;
  70. display: flex;
  71. justify-content: center;
  72. align-items: center;
  73. margin-right: 45rpx;
  74. }
  75. }
  76. }
  77. </style>