Merge branch 'master' of http://121.40.40.223:3000/zizhong.wang/konggang-city-miniprogram

pages/policy/policy_rich_card.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="card-situation">
+    <div class="card-title">{{ model.title }}</div>
+    <div
+      v-html="model.text"
+      class="card-text"
+      :class="{ isfold: isfold }"
+    ></div>
+    <div class="fold" v-if="isFold && localIsFold" @click="changeFoldState">
+      点击{{ foldText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["model", "isFold"],
+  data() {
+    return {
+      isfold: false,
+      height: 0,
+      foldText: "展开",
+      scrollTop: 0,
+      localIsFold: true,
+    };
+  },
+  mounted() {
+    let query = uni.createSelectorQuery().in(this);
+    let cardText = query.select(".card-text");
+    cardText
+      .boundingClientRect((res) => {
+        this.height = res.height;
+      })
+      .exec(() => {
+        if (this.height < 500) {
+          this.localIsFold = false;
+        } else {
+          this.isfold = true;
+        }
+      });
+  },
+  watch: {
+    isfold(newValue, oldValue) {
+      if (newValue) {
+        this.foldText = "展开";
+      } else {
+        this.foldText = "收起";
+      }
+    },
+  },
+  methods: {
+    changeFoldState() {
+      let poor = 0,
+        Bheight = 0,
+        Eheight = 0;
+      let query = uni.createSelectorQuery().in(this);
+      let con = query.select(".card-situation");
+      con
+        .fields({ size: true }, (e) => {
+          Bheight = e.height;
+        })
+        .exec(() => {
+          console.log("开始高度", Bheight);
+        });
+      this.isfold = !this.isfold;
+      con
+        .fields({ size: true }, (e) => {
+          Eheight = e.height;
+        })
+        .exec(() => {
+          // this.$emit("changeScroll", Bheight - Eheight);
+          console.log("结束高度", Eheight);
+        });
+           this.$emit("changeScroll");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card-situation {
+  margin-top: 20rpx;
+  padding: 20rpx;
+  border-top: 8rpx solid #f2f2f2;
+  box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+  border-radius: 32rpx;
+  .card-title {
+    font-weight: 600;
+    padding: 20rpx 20rpx 0rpx 20rpx;
+  }
+  .card-text {
+    padding: 20rpx;
+    margin-top: 20rpx;
+    font-size: 27rpx;
+    letter-spacing: 1rpx;
+    line-height: 50rpx;
+    overflow: hidden;
+  }
+  .fold {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $uni-color-primary;
+  }
+}
+.isfold {
+  max-height: 340rpx;
+}
+</style>

pages/selfCenter/index.vue

@@ -1,49 +1,121 @@
 <template>
-	<view class="content">
-		{{message}}
-	</view>
+  <view class="content">
+    <div class="self-inf">
+      <div class="img-name-box">
+        <img src="/static/logo.png" alt="" class="heade-img" />
+        <p src="" alt="" class="nickname">微信昵称2233</p>
+      </div>
+      <img
+        class="bg-img"
+        src="https://kiq.xazhima.com//upload/main_page/202109/202109231407288075.jpeg"
+        alt=""
+      />
+    </div>
+    <div class="options">
+      <div v-for="(item, idx) in list" :key="idx" class="options-item">
+        <div class="img-box">
+          <img :src="item.icoin" alt="" class="options-item-img" /><span></span>
+        </div>
+        <div
+          class="options-item-name"
+          :class="{ fontGrey: idx == list.length - 1 }"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				message:'我的'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-			
-       }
-	}
+export default {
+  data() {
+    return {
+      message: "我的",
+      list: [
+        { icoin: "/static/logo.png", name: "我的建议" },
+        { icoin: "/static/logo.png", name: "我的报名" },
+        { icoin: "/static/logo.png", name: "我的收藏" },
+        { icoin: "/static/logo.png", name: "退出登录" },
+      ],
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
+  .self-inf {
+    position: relative;
+    height: 400rpx;
+    width: 100%;
+    display: flex;
+    margin-bottom: 80rpx;
+    border-radius: 0rpx 0rpx 100% 100%;
+    .img-name-box {
+      height: 150rpx;
+      margin-top: 80rpx;
+      display: flex;
+      align-items: center;
+      .heade-img {
+        z-index: 1;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 50%;
+        margin-left: 100rpx;
+      }
+    }
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
+    .bg-img {
+      z-index: -1;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 0rpx 0rpx 70rpx 70rpx;
+    }
+    .nickname {
+      font-weight: 600;
+      font-size: 35rpx;
+      margin-left: 40rpx;
+			color: #ffffff;
+			letter-spacing: 1rpx;
+    }
+  }
+  .options {
+    padding: 70rpx;
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+    z-index: 99;
+    position: relative;
+    top: -230rpx;
+    .options-item {
+      background-color: #fff;
+      display: flex;
+      box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+      border-radius: 32rpx;
+      margin-top: 20px;
+      height: 150rpx;
+      align-items: center;
+      .img-box {
+        margin-left: 40rpx;
+        .options-item-img {
+          width: 60rpx;
+          height: 60rpx;
+        }
+      }
+      .options-item-name {
+        margin-left: 40rpx;
+        font-weight: 600;
+        font-size: 35rpx;
+      }
+    }
+  }
+}
+.fontGrey {
+  color: $uni-text-color-grey;
+}
 </style>