提交

src/app.config.ts

@@ -2,6 +2,7 @@ export default defineAppConfig({
   pages: [
     'pages/index/index',
     'pages/examine/index',
+    'pages/application_list/index'
   ],
   window: {
     backgroundTextStyle: "light",

src/component/input/index.tsx

@@ -5,7 +5,9 @@ import Taro from "@tarojs/taro";
 import "./index.scss";
 
 class InputBox extends React.Component<any, any> {
-  static defaultProps = {};
+  static defaultProps = {
+    marginTop: -400
+  };
 
   constructor(props: any) {
     super(props);
@@ -39,7 +41,7 @@ class InputBox extends React.Component<any, any> {
     // const {  } = this.props;
 
     return (
-      <View className="inputBox-main">
+      <View className="inputBox-main" style={'margin-top:' + this.props.marginTop + 'rpx'}>
         {this.state.width > 0 && (
           <Image
             style={`width: ${this.state.width}px;height: ${this.state.topHeight}px;`}

src/pages/application_list/index.config.ts

@@ -0,0 +1,7 @@
+export default definePageConfig({
+  navigationBarBackgroundColor: "#E5CBAA",
+  navigationBarTitleText: "审核",
+  navigationBarTextStyle: "white",
+  usingComponents: {},
+  navigationStyle: "custom",
+});

src/pages/application_list/index.scss

@@ -0,0 +1,28 @@
+@import "..\\..\\app-let.scss";
+
+.back {
+  position: fixed;
+  top: 3em;
+  left: 1em;
+  z-index: 10;
+  width: 2em;
+  height: 2em;
+}
+
+.application_list{
+  padding-top: 120px;
+
+  .item{
+    display: flex;
+    padding: 0 1em;
+
+    .left{
+      width: 200px;
+      height: 200px;
+    }
+    .right {
+      flex: 1;
+      padding-left: .5em;
+    }
+  }
+}

src/pages/application_list/index.tsx

@@ -0,0 +1,87 @@
+import React, { Component } from "react";
+import {
+  View,
+  Image
+} from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import { InputBox } from "../../component/input/index";
+
+import left from "../../images/left.png";
+
+import "./index.scss";
+
+export default class Examine extends Component<any, any> {
+  pageCtx = Taro.getCurrentInstance().page;
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      list: [
+        {
+          works:
+            "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/R-C.jfif",
+          name: "张云翔",
+          birthday: "2015-03-03",
+          teacher: "李勇利",
+          school: "清华",
+          articleGroup: "书法",
+          articleName: "兰亭序",
+          articleDescribe:
+            "展现了中国传统艺术的魅力。墨色浓淡相间，笔触流畅而有力，每一字之间形成和谐的整体。作品中融入了经典诗句，传递出深邃的哲理和人生感悟。每一个字都经过精心构思和书写，字体大小和间距恰到好处，整个作品看起来平衡而舒适。",
+        },
+        {
+          works:
+            "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/R-C.jfif",
+          name: "张云翔",
+          birthday: "2015-03-03",
+          teacher: "李勇利",
+          school: "清华",
+          articleGroup: "书法",
+          articleName: "兰亭序",
+          articleDescribe:
+            "展现了中国传统艺术的魅力。墨色浓淡相间，笔触流畅而有力，每一字之间形成和谐的整体。作品中融入了经典诗句，传递出深邃的哲理和人生感悟。每一个字都经过精心构思和书写，字体大小和间距恰到好处，整个作品看起来平衡而舒适。",
+        },
+      ],
+    };
+  }
+
+  backPage = () => {
+    Taro.navigateBack();
+  };
+
+  showImage = (url:string) => {
+    Taro.previewImage({
+      urls: [url],
+    });
+  }
+
+  render() {
+    const systemInfo = Taro.getSystemInfoSync();
+    // 获取胶囊的布局位置信息
+    const menuButtonBoundingInfo = Taro.getMenuButtonBoundingClientRect();
+    // 计算胶囊的高度
+    const capsuleHeight =
+      menuButtonBoundingInfo.bottom - menuButtonBoundingInfo.top;
+    const height = (systemInfo.statusBarHeight || 0) + capsuleHeight + 8;
+    return (
+      <View className="application_list page" style={"padding-top: " + (height + 10) + 'px'}>
+        <Image src={left} className="back" onClick={this.backPage} style={'top: ' + (height - 28) + 'px'}></Image>
+
+        {this.state.list.map((v:any) => {
+          return (<InputBox marginTop={0} style="margin-bottom: 5rpx">
+            <View className="item">
+              <Image onClick={()=>this.showImage(v.works)} className="left" src={v.works} mode="aspectFit" ></Image>
+              <View className="right">
+                <View>姓名：{v.name}</View>
+                <View>指导老师：{v.teacher}</View>
+                <View>作品名称：{v.articleName}</View>
+                <View>作品简介：{v.articleDescribe}</View>
+              </View>
+            </View>
+          </InputBox>)
+        })}
+
+      </View>
+    );
+  }
+}

src/pages/examine/index.config.ts

@@ -3,5 +3,5 @@ export default definePageConfig({
   navigationBarTitleText: "审核",
   navigationBarTextStyle: "white",
   usingComponents: {},
-  navigationStyle: "default",
+  navigationStyle: "custom",
 });

src/pages/examine/index.css

@@ -20,7 +20,7 @@
   overflow-y: auto;
   position: absolute;
   width: 750px;
-  height: 45vh;
+  height: 35vh;
   background-color: rgba(0, 0, 0, 0.5);
   bottom: 0;
   padding: 1em;
@@ -64,3 +64,12 @@
   border-color: #ee0a24;
   color: #FFF;
 }
+
+.back {
+  position: fixed;
+  top: 2em;
+  left: 1em;
+  z-index: 10;
+  width: 2em;
+  height: 2em;
+}

src/pages/examine/index.min.css

@@ -1 +1 @@
-.examine{flex-grow:1}.examine .zuopin{width:750px;height:100vh;position:relative}.examine .zuopin .zuopin_tu{width:750px;height:100vh}.examine .zuopin .zuopin_gongju{box-sizing:border-box;overflow-y:auto;position:absolute;width:750px;height:45vh;background-color:rgba(0,0,0,0.5);bottom:0;padding:1em;font-size:28px;color:#fff;line-height:1.8em}.examine .zuopin .zuopin_gongju .zuopin_jianjie{text-indent:2em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;text-overflow:ellipsis}.examine .zuopin .zuopin_gongju .zuopin_gongju_tool{display:flex}.examine .zuopin .zuopin_gongju .zuopin_gongju_tool .zuopin_gongju_item{flex:1;text-align:center;padding:1em 0}.examine .zuopin .zuopin_gongju .zuopin_gongju_tool .zuopin_gongju_item .zuopin_gongju_btn{color:#000;height:64px;line-height:64px;width:6em;margin:0 auto;border:1px solid #eee;border-radius:2em;background-color:#eee}.examine .zuopin .zuopin_gongju .zuopin_gongju_tool .zuopin_gongju_item .zuopin_gongju_btn_err{background-color:#ee0a24;border-color:#ee0a24;color:#fff}
+.examine{flex-grow:1}.examine .zuopin{width:750px;height:100vh;position:relative}.examine .zuopin .zuopin_tu{width:750px;height:100vh}.examine .zuopin .zuopin_gongju{box-sizing:border-box;overflow-y:auto;position:absolute;width:750px;height:35vh;background-color:rgba(0,0,0,0.5);bottom:0;padding:1em;font-size:28px;color:#fff;line-height:1.8em}.examine .zuopin .zuopin_gongju .zuopin_jianjie{text-indent:2em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;text-overflow:ellipsis}.examine .zuopin .zuopin_gongju .zuopin_gongju_tool{display:flex}.examine .zuopin .zuopin_gongju .zuopin_gongju_tool .zuopin_gongju_item{flex:1;text-align:center;padding:1em 0}.examine .zuopin .zuopin_gongju .zuopin_gongju_tool .zuopin_gongju_item .zuopin_gongju_btn{color:#000;height:64px;line-height:64px;width:6em;margin:0 auto;border:1px solid #eee;border-radius:2em;background-color:#eee}.examine .zuopin .zuopin_gongju .zuopin_gongju_tool .zuopin_gongju_item .zuopin_gongju_btn_err{background-color:#ee0a24;border-color:#ee0a24;color:#fff}.back{position:fixed;top:2em;left:1em;z-index:10;width:2em;height:2em}

src/pages/examine/index.scss

@@ -19,7 +19,7 @@
       overflow-y: auto;
       position: absolute;
       width: 750px;
-      height: 45vh;
+      height: 35vh;
       background-color: rgba(0, 0, 0, 0.5);
       bottom: 0;
       padding: 1em;
@@ -65,3 +65,12 @@
     }
   }
 }
+
+.back {
+  position: fixed;
+  top: 3em;
+  left: 1em;
+  z-index: 10;
+  width: 2em;
+  height: 2em;
+}

src/pages/examine/index.tsx

@@ -9,6 +9,8 @@ import {
 } from "@tarojs/components";
 import Taro from "@tarojs/taro";
 
+import left from "../../images/left.png";
+
 import "./index.scss";
 
 export default class Examine extends Component<any, any> {
@@ -53,10 +55,15 @@ export default class Examine extends Component<any, any> {
     console.log(current);
   };
 
+  backPage = () => {
+    Taro.navigateBack();
+  };
+
   render() {
     return (
       <View className="page">
-        <Swiper className="examine" onChange={this.change} vertical circular>
+        <Image src={left} className="back" onClick={this.backPage}></Image>
+        <Swiper className="examine" onChange={this.change} vertical circular cacheExtent={1}>
           {this.state.list.map((v) => {
             return (
               <SwiperItem>
@@ -66,7 +73,7 @@ export default class Examine extends Component<any, any> {
                     mode="aspectFit"
                     className="zuopin_tu"
                   ></Image>
-                  <View className="zuopin_gongju">
+                  <View className="zuopin_gongju" style="min-height: 280px;">
                     <View>
                       <Text>{`${v.articleName}(作者：${v.name}，生日：${v.birthday})`}</Text>
                     </View>

src/pages/index/index.tsx

@@ -52,9 +52,7 @@ export default class Index extends Component<any, any> {
       unm: 3,
     },
   ];
-
-  #Tabs = [<Home />, <PreviousEditions />, <Application />, <Us />];
-
+  
   constructor(props: any) {
     super(props);
     this.state = {
@@ -79,7 +77,12 @@ export default class Index extends Component<any, any> {
           color={this.state.selectPage.color}
           title={this.state.selectPage.title}
         />
-        <View className="main">{this.#Tabs[this.state.selectPage.unm]}</View>
+        <View className="main">
+          {this.state.selectPage.unm === 0 && <Home />}
+          {this.state.selectPage.unm === 1 && <PreviousEditions />}
+          {this.state.selectPage.unm === 2 && <Application />}
+          {this.state.selectPage.unm === 3 && <Us />}
+        </View>
         <LocalFooter list={this.list} onClick={this.changePage} />
       </View>
     );

src/pages/us/index.tsx

@@ -123,12 +123,17 @@ class Us extends React.Component<any, any> {
   };
 
   toExamine = () =>{
-    console.log("---")
     Taro.navigateTo({
       url: '/pages/examine/index'
     })
   };
 
+  toApplication_list = () => {
+    Taro.navigateTo({
+      url: '/pages/application_list/index'
+    })
+  };
+
   render() {
     // const {  } = this.props;
     return (
@@ -163,7 +168,7 @@ class Us extends React.Component<any, any> {
             </Button>
           )}
           {this.state.userPhone && (
-            <View className="us_cell">
+            <View className="us_cell" onClick={this.toApplication_list}>
               <View className="left">
                 <Image src={application} className="img"></Image>
                 <Text className="text">报名信息</Text>