322 lines
7.3 KiB
Vue
322 lines
7.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- College Info Section -->
|
|
<view class="college-info-section">
|
|
<view class="college-header-top">
|
|
<!-- <image class="college-logo" src="/static/college-logo.png" mode="aspectFit"></image> -->
|
|
<view class="college-details">
|
|
<text class="college-name">吉林艺术学院</text>
|
|
<view class="college-tags">
|
|
<text class="college-tag">本科</text>
|
|
<text class="college-tag">艺术类</text>
|
|
<text class="college-tag">公办</text>
|
|
</view>
|
|
<text class="college-location">吉林 长春市</text>
|
|
</view>
|
|
</view>
|
|
<view class="college-nav">
|
|
<view class="nav-item">
|
|
<view class="nav-icon-placeholder"></view> <!-- Icon placeholder -->
|
|
<text>院校介绍</text>
|
|
</view>
|
|
<view class="nav-item">
|
|
<view class="nav-icon-placeholder"></view> <!-- Icon placeholder -->
|
|
<text>招录数据</text>
|
|
</view>
|
|
<view class="nav-item">
|
|
<view class="nav-icon-placeholder"></view> <!-- Icon placeholder -->
|
|
<text>录取信息</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Major Section -->
|
|
<view class="section major-section">
|
|
<text class="section-title">专业名称</text>
|
|
<view class="major-detail">
|
|
<view class="major-text-info">
|
|
<text class="major-name">产品设计[文科](提前批)</text>
|
|
<text class="major-info">(专业组61)(13200元/年; 办学地点: 吉林艺术学院红旗街校区)</text>
|
|
</view>
|
|
<view class="major-count">
|
|
<view class="count-square"></view>
|
|
<text>共8个</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Prediction Result Section -->
|
|
<view class="section prediction-section">
|
|
<view class="prediction-header">
|
|
<text class="prediction-title">测算结果</text>
|
|
</view>
|
|
<view class="prediction-content">
|
|
<text class="required-score">当前需要超过528分</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Notes/Score Thresholds Section -->
|
|
<view class="section notes-section">
|
|
<text class="section-title">注:</text>
|
|
<text class="note-item">2023河南文化分控线为 <text class="highlight-score">370</text> 分</text>
|
|
<text class="note-item">2023河南专业分控线为 <text class="highlight-score">216</text> 分</text>
|
|
</view>
|
|
|
|
<!-- Admission Method Section -->
|
|
<view class="section admission-method-section">
|
|
<text class="section-title">录取方式</text>
|
|
<text class="method-item">文*<text class="highlight-score">0.067</text>+专*<text class="highlight-score">0.167</text></text>
|
|
<text class="method-item">院校限制 暂无</text>
|
|
</view>
|
|
|
|
<!-- Bottom Button -->
|
|
<view class="bottom-button-container">
|
|
<button class="collect-button">收藏院校</button>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "test-cultural-detail2",
|
|
components: {},
|
|
data() {
|
|
return {
|
|
// 数据可以在这里定义
|
|
}
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack(); // 返回上一页
|
|
}
|
|
// 其他方法
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
background-color: #f8f8f8; /* Slightly grey background */
|
|
min-height: 100vh;
|
|
padding-bottom: 100rpx; /* Space for the bottom button */
|
|
}
|
|
.eye-icon {
|
|
font-size: 36rpx; /* Adjust eye icon size */
|
|
}
|
|
|
|
|
|
/* College Info Section */
|
|
.college-info-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.college-header-top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.college-logo {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 30rpx;
|
|
border-radius: 50%; /* If logo is round */
|
|
background-color: #eee; /* Placeholder background */
|
|
}
|
|
|
|
.college-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.college-name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
|
|
.college-tags {
|
|
display: flex;
|
|
margin: 10rpx 0;
|
|
}
|
|
|
|
.college-tag {
|
|
font-size: 24rpx;
|
|
color: #007aff; /* Blue/teal like color */
|
|
border: 1rpx solid #007aff;
|
|
padding: 4rpx 12rpx;
|
|
margin-right: 15rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.college-location {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
display: block;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.college-nav {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
border-top: 1rpx solid #eee;
|
|
padding-top: 30rpx;
|
|
}
|
|
|
|
.nav-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
.nav-item text {
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.nav-icon-placeholder {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background-color: #e0e0e0; /* Placeholder grey circle/square */
|
|
border-radius: 50%; /* Or remove for square */
|
|
}
|
|
|
|
|
|
/* Generic Section Styling */
|
|
.section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-bottom: 20rpx;
|
|
display: block; /* Ensures title takes full width */
|
|
}
|
|
|
|
/* Major Section */
|
|
.major-detail {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start; /* Align items to the top */
|
|
}
|
|
|
|
.major-text-info {
|
|
flex: 1; /* Allows text to take available space and wrap */
|
|
margin-right: 20rpx; /* Space between text and count */
|
|
}
|
|
|
|
.major-name {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.major-info {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
display: block;
|
|
}
|
|
|
|
.major-count {
|
|
display: flex;
|
|
flex-direction: column; /* Stack icon and text */
|
|
align-items: center; /* Center content horizontally */
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
.count-square {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-color: #00c8a8; /* Teal color from image */
|
|
margin-bottom: 8rpx; /* Space between square and text */
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
/* Prediction Result Section */
|
|
.prediction-section {
|
|
text-align: right; /* Align content to the right */
|
|
}
|
|
.prediction-header {
|
|
/* This title seems right aligned but separate */
|
|
/* It might be better to place it within the content area and align right */
|
|
/* Or use flex to push it right */
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.prediction-title {
|
|
font-size: 28rpx;
|
|
color: #00c8a8; /* Teal color */
|
|
/* Removing section-title margin-bottom if using prediction-header margin */
|
|
}
|
|
|
|
.prediction-content {
|
|
/* Content below the title */
|
|
text-align: right;
|
|
}
|
|
|
|
.required-score {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
/* Notes/Score Thresholds Section */
|
|
.notes-section text {
|
|
display: block; /* Each text on a new line */
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.notes-section text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.highlight-score {
|
|
color: #007aff; /* Blue/teal highlight color */
|
|
}
|
|
|
|
/* Admission Method Section */
|
|
.admission-method-section .method-item {
|
|
display: block; /* Each item on a new line */
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.admission-method-section .method-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/* Bottom Button */
|
|
.bottom-button-container {
|
|
position: fixed; /* Fix button to the bottom */
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20rpx 30rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0 -2rpx 4rpx rgba(0,0,0,0.1); /* Add shadow above button */
|
|
z-index: 10; /* Ensure button is above other content */
|
|
}
|
|
|
|
.collect-button {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background-color: #e0e0e0; /* Grey background */
|
|
color: #666; /* Grey text */
|
|
font-size: 34rpx;
|
|
border-radius: 10rpx;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
</style> |