feat: 初始化 uni-app 项目
This commit is contained in:
winter_born
245
pages/index/index.vue
Normal file
245
pages/index/index.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view class="begin">
|
||||
<view class="headers">
|
||||
<text class="text1">时代楷模</text>
|
||||
<view class="div">
|
||||
学习雷锋同志，弘扬雷锋精神
|
||||
</view>
|
||||
<view class="headers_middle">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="headers_bottom">
|
||||
<view class="bottom_left">
|
||||
<text>楷模</text>
|
||||
<br>公告
|
||||
</view>
|
||||
<view class="bottom_right">
|
||||
<p>2021年河北省“最美基层高校毕业生”先进事迹发布</p>
|
||||
<p>河北省委宣传部、省人社局在“最美河北.....</p>
|
||||
</view>
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<!-- <view class="row_1">
|
||||
<view class="uni-section">
|
||||
<view></view>
|
||||
<p @click="toggleColor()" :style="{color:textColor}">楷模列表</p>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view></view>
|
||||
<p>英雄故事</p>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view></view>
|
||||
<p>英雄故事</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row_2">
|
||||
<view class="section">
|
||||
<view></view>
|
||||
<p>英雄故事</p>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view></view>
|
||||
<p>英雄故事</p>
|
||||
</view> -->
|
||||
<card class="card" v-for="imagepath of imagepaths" :image_path="imagepath.path" :value="imagepath.value">
|
||||
</card>
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
<view>
|
||||
<text class="title">楷模列表</text>
|
||||
<view class="page">
|
||||
<view></view>
|
||||
<view>
|
||||
<p>中宣部授予肖文儒“时代楷模”...</p>
|
||||
<p>模特姓名：肖文儒</p>
|
||||
<p>38年来，国家安全生产应急救援中心副主任兼工程师肖文儒参与过多次重...</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from "../../componets/card.vue"
|
||||
export default {
|
||||
components: {
|
||||
card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isRed: false,
|
||||
list: [{
|
||||
id: 1,
|
||||
name: ""
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
textColor() {
|
||||
return this.isRed ? 'red' : 'black'
|
||||
},
|
||||
imagepaths() {
|
||||
const base_url = "http://124.93.196.45:10091/Neusoft/times-model/appStudy/app/historyList"
|
||||
let Path = Array.from({
|
||||
length: 6
|
||||
}, (_, x) => `../../static/c${x+1}.png`);
|
||||
// let value = Array.from({
|
||||
// length: 6
|
||||
// }, (_, x) => `英雄故事`);
|
||||
let value = ["楷模列表", "英雄故事", "身边英雄", "物资捐赠", "数据分析", "更多"]
|
||||
async function text() {
|
||||
const text = await fetch(base_url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": "eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImIyOGYwYjkzLTU0ZTktNDM3MC05NTczLWUzMWE5MDA2OGM5MyJ9.Gqqt22q3ZxXWZ04gHq5F0tTKPypHRqjGOhCe1NcUjvSplv6GschoZW_3xc_MOI-T38u_81kTXX7LAt7PXemM3w"
|
||||
}
|
||||
})
|
||||
return await text.json()
|
||||
}
|
||||
text().then(data => console.log(data));
|
||||
return Path.map((path, index) => ({
|
||||
path: path,
|
||||
value: value[index]
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleColor() {
|
||||
this.isRed = !this.isRed
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.begin {
|
||||
background-color: rgb(246, 246, 246);
|
||||
|
||||
}
|
||||
|
||||
.text1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
color: rgb(195, 5, 15);
|
||||
font-weight: bold;
|
||||
padding-bottom: 3%;
|
||||
background-color: #fff !important;
|
||||
/* margin-right: -1px; */
|
||||
}
|
||||
|
||||
.headers .div {
|
||||
color: #ffffff;
|
||||
background-color: rgb(195, 5, 15);
|
||||
text-align: center;
|
||||
padding: 3%;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.headers_middle {
|
||||
height: 20vh;
|
||||
border: 1px red solid;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.headers_bottom {
|
||||
height: 10vh;
|
||||
display: flex;
|
||||
margin: 5px 15px;
|
||||
align-items: center;
|
||||
border-radius: 15px;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.bottom_left {
|
||||
width: 20%;
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
text-align: center;
|
||||
border-right: 2px #999999 solid;
|
||||
|
||||
}
|
||||
|
||||
.bottom_left text {
|
||||
color: rgb(195, 5, 15);
|
||||
margin-bottom: 1%;
|
||||
|
||||
}
|
||||
|
||||
.bottom_right {
|
||||
height: 10vh;
|
||||
border-radius: 0px 15px 15px 0px;
|
||||
}
|
||||
|
||||
.bottom_right p {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.bottom_right p:first-child {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
.bottom_right p:nth-child(2) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.headers+view {
|
||||
background-color: #fff;
|
||||
margin: 10px 15px;
|
||||
border-radius: 15px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.card {width: 55%;text-align: center;}
|
||||
|
||||
.headers+view+view {
|
||||
background-color: rgb(246, 246, 246);
|
||||
margin: 10px 15px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
border-left: 5px firebrick solid;
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.page {
|
||||
border-radius: 15px;
|
||||
background-color: #fff;
|
||||
height: 12vh;
|
||||
display: flex;
|
||||
border-radius: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page view:first-of-type {
|
||||
width: 25%;
|
||||
height: 75%;
|
||||
margin: 3%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.page view:nth-child(2) p:first-of-type {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.page view:nth-child(2) p:nth-child(2) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.page view:nth-child(2) p:nth-child(3) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user