my.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <view class="intro-page common">
  3. <view class="top-class"></view>
  4. <view class="title">
  5. 个人中心
  6. </view>
  7. <view class="head">
  8. <u-row class="row-class">
  9. <u-col span="4">
  10. <image class="logo-img"
  11. src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo.png"
  12. mode="aspectFit" />
  13. </u-col>
  14. <u-col span="4">
  15. <image class="commodity-img"
  16. src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/commodity.png"
  17. mode="aspectFit" />
  18. </u-col>
  19. <u-col span="4">
  20. <image class="logo-rules"
  21. src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png"
  22. @click="openDetail" />
  23. </u-col>
  24. </u-row>
  25. </view>
  26. <view class="topImg">
  27. <image class="img_1" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg.png"
  28. mode="heightFix" />
  29. </view>
  30. <view class="content">
  31. <view class="cardTop" >
  32. </view>
  33. <view class="content_text">
  34. <u-row style="height: 200rpx;">
  35. <u-col span="4" textAlign="center" @click="jumpScanLog">
  36. <image class="tubiao" src="/static/images/tabbar/cjx/scan.png" mode="aspectFit" />
  37. <view class="">
  38. 扫码记录
  39. </view>
  40. </u-col>
  41. <u-col span="4" textAlign="center" @click="jumpScanAddress">
  42. <image class="tubiao" src="/static/images/tabbar/cjx/scan.png" mode="aspectFit" />
  43. <view class="">
  44. 业务管理
  45. </view>
  46. </u-col>
  47. <u-col span="4">
  48. </u-col>
  49. </u-row>
  50. </view>
  51. <view class="return_view">
  52. <view class="return-button" @click="goBack()">返回</view>
  53. </view>
  54. </view>
  55. <!-- <CustomTabbar />-->
  56. </view>
  57. </template>
  58. <script>
  59. import CustomTabbar from '@/components/tabbar_cjx.vue';
  60. export default {
  61. components: {
  62. CustomTabbar
  63. },
  64. methods: {
  65. goBack() {
  66. uni.navigateBack();
  67. },
  68. jumpScanLog() {
  69. uni.navigateTo({
  70. url: '/pages/cjx/record/record'
  71. });
  72. },
  73. jumpScanAddress(){
  74. uni.navigateTo({
  75. url: '/pages/hexiao/login?uid=14'
  76. });
  77. }
  78. }
  79. }
  80. </script>
  81. <style lang="scss" scoped>
  82. @import url('../../../static/scss/common_cjx.css');
  83. .row-class {
  84. height: 80rpx;
  85. }
  86. .theme-text {
  87. height: 10vh;
  88. text-align: center;
  89. line-height: 11vh;
  90. .textImage {
  91. height: 80rpx;
  92. width: 400rpx;
  93. }
  94. }
  95. .intro-card {
  96. margin: 0 32rpx;
  97. padding: 32rpx 24rpx 24rpx 24rpx;
  98. background: rgba(131, 100, 71, 0.5);
  99. border-radius: 10rpx;
  100. .intro-view {
  101. border: 1px solid #341B10;
  102. padding: 10px;
  103. margin: 10px;
  104. position: relative;
  105. .intro-label {
  106. background-image:
  107. url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/label.png");
  108. /* 使用绝对路径 */
  109. background-size: contain;
  110. background-repeat: no-repeat;
  111. width: 220rpx;
  112. height: 120rpx;
  113. position: absolute;
  114. margin-top: -70rpx;
  115. align-content: center;
  116. .label-title {
  117. font-weight: bold;
  118. font-size: 30rpx;
  119. color: #341B10;
  120. text-align: center;
  121. margin-left: 10px;
  122. height: 120rpx;
  123. line-height: 110rpx;
  124. }
  125. }
  126. .intro-content {
  127. font-size: 28rpx;
  128. color: #5c4322;
  129. line-height: 1.8;
  130. margin: 20rpx 0px;
  131. text-align: justify;
  132. height: 38vh;
  133. }
  134. }
  135. }
  136. .textImage {
  137. height: 80rpx;
  138. width: 400rpx;
  139. }
  140. .content {
  141. height: 68vh;
  142. border-radius: 10rpx;
  143. margin: 0rpx 40rpx;
  144. padding: 10rpx 24rpx;
  145. overflow: auto;
  146. align-items: center;
  147. justify-content: center;
  148. background-image:
  149. url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/cardBgi.png");
  150. background-size: cover;
  151. background-position: center;
  152. background-repeat: no-repeat;
  153. }
  154. .company-img {
  155. width: 160rpx;
  156. height: 160rpx;
  157. border-radius: 12rpx;
  158. object-fit: cover;
  159. margin-top: 10rpx;
  160. background: #eee;
  161. border-radius: 80rpx;
  162. }
  163. .touxiang {
  164. height: 120px;
  165. align-content: center;
  166. justify-content: center;
  167. text-align: center;
  168. }
  169. .tubiao {
  170. background-size: cover;
  171. /* 确保背景图片自适应填充整个容器 */
  172. background-position: center;
  173. /* 背景图片居中显示 */
  174. background-repeat: no-repeat;
  175. /* 防止背景图重复 */
  176. height: 100rpx;
  177. width: 100%;
  178. }
  179. </style>