提交

src/pages/us/index.css

@@ -1,8 +1,57 @@
 .Us {
   width: 100%;
   box-sizing: border-box;
+  position: relative;
+}
+
+.Us .user {
+  position: absolute;
+  top: 235px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+  padding: 0;
+  width: 200px;
+  height: 200px;
+}
+
+.Us .user .userImg {
+  width: 200px;
+  height: 200px;
 }
 
 .Us .main {
   padding: 0 35px;
 }
+
+.Us .main .us_cell {
+  display: flex;
+  font-size: 28px;
+  height: 2em;
+  line-height: 2em;
+  margin: 0 0 16px 0;
+}
+
+.Us .main .us_cell:last-child {
+  margin-bottom: 0;
+}
+
+.Us .main .us_cell .right {
+  flex-basis: 80px;
+  text-align: right;
+}
+
+.Us .main .us_cell .left {
+  flex: 1;
+}
+
+.Us .main .us_cell .left .text {
+  vertical-align: middle;
+  margin-left: 5px;
+}
+
+.Us .main .us_cell .img {
+  width: 36px;
+  height: 36px;
+  vertical-align: middle;
+}

src/pages/us/index.min.css

@@ -1 +1 @@
-.Us{width:100%;box-sizing:border-box}.Us .main{padding:0 35px}
+.Us{width:100%;box-sizing:border-box;position:relative}.Us .user{position:absolute;top:235px;left:50%;transform:translateX(-50%);border-radius:50%;padding:0;width:200px;height:200px}.Us .user .userImg{width:200px;height:200px}.Us .main{padding:0 35px}.Us .main .us_cell{display:flex;font-size:28px;height:2em;line-height:2em;margin:0 0 16px 0}.Us .main .us_cell:last-child{margin-bottom:0}.Us .main .us_cell .right{flex-basis:80px;text-align:right}.Us .main .us_cell .left{flex:1}.Us .main .us_cell .left .text{vertical-align:middle;margin-left:5px}.Us .main .us_cell .img{width:36px;height:36px;vertical-align:middle}

src/pages/us/index.scss

@@ -3,8 +3,56 @@
 .Us {
   width: 100%;
   box-sizing: border-box;
+  position: relative;
+
+  .user {
+    position: absolute;
+    top: 235px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 50%;
+    padding: 0;
+    width: 200px;
+    height: 200px;
+
+    .userImg {
+      width: 200px;
+      height: 200px;
+    }
+  }
 
   .main {
     padding: 0 35px;
-}
+
+    .us_cell {
+      display: flex;
+      font-size: $default-font-size;
+      height: 2em;
+      line-height: 2em;
+      margin: 0 0 16px 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .right {
+        flex-basis: 80px;
+        text-align: right;
+      }
+
+      .left {
+        flex: 1;
+
+        .text {
+          vertical-align: middle;
+          margin-left: 5px;
+        }
+      }
+
+      .img {
+        width: 36px;
+        height: 36px;
+        vertical-align: middle;
+      }
+    }
+  }
 }

src/pages/us/index.tsx

@@ -1,11 +1,18 @@
 import React from "react";
-import { View, Video, Image } from "@tarojs/components";
+import { View, Text, Image, Button } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 
 import "./index.scss";
 
 import { InputBox } from "../../component/input/index";
 
+import right from "../../images/right.png";
+import application from "../../images/application.png";
+import certificate from "../../images/certificate.png";
+import expert from "../../images/expert.png";
+
+import user from "../../images/user.png";
+
 class Us extends React.Component<any, any> {
   static defaultProps = {};
   #systemInfo = Taro.getSystemInfoSync();
@@ -14,6 +21,7 @@ class Us extends React.Component<any, any> {
     this.state = {
       height: 0,
       heightKf: 0,
+      userUrl: Taro.getStorageSync('userUrl') || ""
     };
   }
 
@@ -26,15 +34,27 @@ class Us extends React.Component<any, any> {
   getImageKf = (e: any) => {
     this.setState({
       heightKf:
-        ((this.#systemInfo.screenWidth - 60) / e.detail.width) * e.detail.height,
+        ((this.#systemInfo.screenWidth * 0.92) / e.detail.width) *
+        e.detail.height,
     });
   };
 
+  onChooseAvatar = (e: any) => {
+    Taro.setStorageSync('userUrl', e.detail.avatarUrl)
+    this.setState({
+        userUrl: e.detail.avatarUrl
+    })
+  };
+
   render() {
     // const {  } = this.props;
 
     return (
       <View className="Us">
+        <Button className="user" open-type="chooseAvatar" onChooseAvatar={this.onChooseAvatar}>
+          <Image src={this.state.userUrl || user} className="userImg"></Image>
+        </Button>
+
         <Image
           style={`width: ${this.#systemInfo.screenWidth}px;height: ${
             this.state.height
@@ -42,11 +62,40 @@ class Us extends React.Component<any, any> {
           src="https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/us-top.png"
           onLoad={this.getImageSize}
         />
-        <InputBox>123</InputBox>
+        <InputBox>
+          <View className="us_cell">
+            <View className="left">
+              <Image src={application} className="img"></Image>
+              <Text className="text">报名信息</Text>
+            </View>
+            <View className="right">
+              <Image src={right} className="img"></Image>
+            </View>
+          </View>
+          <View className="us_cell">
+            <View className="left">
+              <Image src={certificate} className="img"></Image>
+              <Text className="text">证书下载</Text>
+            </View>
+            <View className="right">
+              <Image src={right} className="img"></Image>
+            </View>
+          </View>
+          <View className="us_cell">
+            <View className="left">
+              <Image src={expert} className="img"></Image>
+              <Text className="text">专家评审</Text>
+            </View>
+            <View className="right">
+              <Image src={right} className="img"></Image>
+            </View>
+          </View>
+        </InputBox>
         <Image
-          style={`width: ${this.#systemInfo.screenWidth - 60}px;height: ${
+          style={`width: ${this.#systemInfo.screenWidth * 0.92}px;height: ${
             this.state.heightKf
           }px;display: block;margin: 0 auto`}
+          showMenuByLongpress={true}
           src="https://cxzx.smcic.net/topic/tool/img/%E5%B0%91%E5%84%BF%E4%B9%A6%E7%94%BB%E5%A4%A7%E8%B5%9B/us-kf.png"
           onLoad={this.getImageKf}
         />