Skip to content

S
saas-weichat
Commit 12767afd by yanglang123
Options

修改

parent 99225ed9
Showing with 487 additions and 109 deletions
src/components/AllDescribe/index.jsx
...@@ -74,13 +74,13 @@ class AllDescribe extends Component { ...@@ -74,13 +74,13 @@ class AllDescribe extends Component {
} }
// 跳转到投票 // 跳转到投票
handleTo = (id, type, list) => { handleTo = (id, type, list) => {
//pageMode（呈现样式：1逐题呈现 2整页呈现） //pageMode（呈现样式：1逐题呈现 2整页呈现，3，投票单选）
if (type == "投票") { if (type == "投票") {
// hashHistory.push({ // hashHistory.push({
// pathname: func.routerBefore() + "/SurveyDetails", // pathname: func.routerBefore() + "/SurveyDetails",
// query: { id: id }, // query: { id: id },
// }); // });
if (list.pageMode == 2) { if (list.pageMode == 3) {
hashHistory.push({ hashHistory.push({
pathname: func.routerBefore() + "/vote", pathname: func.routerBefore() + "/vote",
query: { id: id, name: list.name, voteNum: list.voteNum }, query: { id: id, name: list.name, voteNum: list.voteNum },
......
src/components/login/login.css
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
} }
.login .login-container .login-form .login-form-item .login-form-input-container .login-form-single-container { .login .login-container .login-form .login-form-item .login-form-input-container .login-form-single-container {
width: 100%; width: 100%;
padding: 30px 20px 20px 30px; padding: 24px;
border: 1px solid #d23a29; border: 1px solid #d23a29;
border-radius: 5px; border-radius: 5px;
margin-top: 15px; margin-top: 15px;
...@@ -88,25 +88,28 @@ ...@@ -88,25 +88,28 @@
padding-left: 88px; padding-left: 88px;
padding-right: 44px; padding-right: 44px;
position: relative; position: relative;
display: flex;
flex-direction: column;
justify-content: center;
} }
.login .login-container .login-form .login-form-item .login-form-input-container .login-form-single-container .form-item .login-input-item-icon { .login .login-container .login-form .login-form-item .login-form-input-container .login-form-single-container .form-item .login-input-item-icon {
width: 40px; width: 44px;
height: 40px; height: 44px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
color: #d23a29; color: #d23a29;
} }
.login .login-container .login-form .login-form-item .login-form-input-container .login-form-single-container .form-item input { .login .login-container .login-form .login-form-item .login-form-input-container .login-form-single-container .form-item input {
height: 47px; font-size: 32px;
line-height: 1;
font-size: 36px;
color: #333; color: #333;
background: transparent; background: transparent;
border: 0; border: 0;
width: 100%; width: 100%;
} }
.login .login-container .login-form .login-form-item .login-form-input-container .login-form-single-container .form-item .login-password-eye { .login .login-container .login-form .login-form-item .login-form-input-container .login-form-single-container .form-item .login-password-eye {
width: 44px;
height: 44px;
color: #c5c5c5; color: #c5c5c5;
font-size: 32px; font-size: 32px;
position: absolute; position: absolute;
...@@ -139,9 +142,6 @@ ...@@ -139,9 +142,6 @@
font-size: 28px; font-size: 28px;
color: #4285f4; color: #4285f4;
} }
.login .login-container .paswDiv {
position: relative;
}
.login .login-container .eye { .login .login-container .eye {
font-size: 0.3rem; font-size: 0.3rem;
right: 0.2rem; right: 0.2rem;
......
src/components/login/login.less
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
} }
.login-form-single-container { .login-form-single-container {
width: 100%; width: 100%;
padding: 30px 20px 20px 30px; padding: 24px;
border: 1px solid #d23a29; border: 1px solid #d23a29;
border-radius: 5px; border-radius: 5px;
margin-top: 15px; margin-top: 15px;
...@@ -78,24 +78,27 @@ ...@@ -78,24 +78,27 @@
padding-left: 88px; padding-left: 88px;
padding-right: 44px; padding-right: 44px;
position: relative; position: relative;
display: flex;
flex-direction: column;
justify-content: center;
.login-input-item-icon { .login-input-item-icon {
width: 40px; width: 44px;
height: 40px; height: 44px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
color: #d23a29; color: #d23a29;
} }
input { input {
height: 47px; font-size: 32px;
line-height: 1;
font-size: 36px;
color: #333; color: #333;
background: transparent; background: transparent;
border: 0; border: 0;
width: 100%; width: 100%;
} }
.login-password-eye { .login-password-eye {
width: 44px;
height: 44px;
color: #c5c5c5; color: #c5c5c5;
font-size: 32px; font-size: 32px;
position: absolute; position: absolute;
...@@ -135,9 +138,6 @@ ...@@ -135,9 +138,6 @@
color: @themeColor; color: @themeColor;
} }
} }
.paswDiv {
position: relative;
}
.eye { .eye {
font-size: 0.3rem; font-size: 0.3rem;
right: 0.2rem; right: 0.2rem;
...@@ -147,7 +147,6 @@ ...@@ -147,7 +147,6 @@
} }
.login-bot-text { .login-bot-text {
font-size: 28px; font-size: 28px;
position: fixed; position: fixed;
bottom: 60px; bottom: 60px;
......
src/components/nav/less/nav.css
...@@ -5,12 +5,9 @@ ...@@ -5,12 +5,9 @@
right: -9px; right: -9px;
} }
#hometitle .am-search-input { #hometitle .am-search-input {
background: #Eb7568; background: #eb7568;
border-radius: 56px; border-radius: 56px;
} }
#hometitle .am-search-input .am-search-value::placeholder {
color: #fff !important;
}
#example .am-search-input .am-search-synthetic-ph { #example .am-search-input .am-search-synthetic-ph {
text-align: left; text-align: left;
margin-left: 20px; margin-left: 20px;
...@@ -23,7 +20,7 @@ ...@@ -23,7 +20,7 @@
align-items: center; align-items: center;
} }
.menuhomeNav .am-search { .menuhomeNav .am-search {
background-color: #Eb7568; background-color: #eb7568;
border-radius: 45px; border-radius: 45px;
height: 70px !important; height: 70px !important;
line-height: 70px !important; line-height: 70px !important;
......
src/components/nav/less/nav.less
...@@ -7,16 +7,15 @@ ...@@ -7,16 +7,15 @@
} }
.am-search-input { .am-search-input {
background: #Eb7568; background: #eb7568;
border-radius: 56px; border-radius: 56px;
.am-search-value::placeholder{
color: #fff !important;
}
} }
} }
#example .am-search-input .am-search-synthetic-ph { #example .am-search-input .am-search-synthetic-ph {
text-align: left; text-align: left;
margin-left: 20px; margin-left: 20px;
} }
.menuhomeNav { .menuhomeNav {
background: #d23a29; background: #d23a29;
...@@ -25,10 +24,10 @@ ...@@ -25,10 +24,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
.am-search { .am-search {
background-color: #Eb7568; background-color: #eb7568;
border-radius: 45px; border-radius: 45px;
height: 70px !important; height: 70px !important;
line-height: 70px !important; line-height: 70px !important;
} }
} }
\ No newline at end of file
src/components/nav/menuhomeNav.jsx
...@@ -74,7 +74,8 @@ class mehomeNav extends React.Component { ...@@ -74,7 +74,8 @@ class mehomeNav extends React.Component {
onClick={() => hashHistory.push(func.routerBefore() + "/search")} onClick={() => hashHistory.push(func.routerBefore() + "/search")}
> >
<SearchBar <SearchBar
placeholder={intl.get("Search") || "搜索"} placeholder='搜索'
className="custom-search-bar"
maxLength={8} maxLength={8}
/> />
</div> </div>
......
src/components/vote/action.js
...@@ -30,4 +30,36 @@ export function voteSumbitApi(params, callback) { ...@@ -30,4 +30,36 @@ export function voteSumbitApi(params, callback) {
} }
); );
}; };
}
export function voteSumbitSecondApi(params, callback) {
const url = `${API.voteSumbitSecondApi}?researchId=${params.researchId}`;
return (dispatch) => {
return excute.get(
url,
(response) => {
if (Number.parseFloat(response.code) === 1000) {
if (callback) {
callback(response.data);
}
}
}
);
};
}
//获取排行榜
export function voteTopApi(params, callback) {
const url = `${API.voteTopApi}?researchId=${params.id}`;
return (dispatch) => {
return excute.get(
url,
(response) => {
if (Number.parseFloat(response.code) === 1000) {
if (callback) {
callback(response.data);
}
}
}
);
};
} }
\ No newline at end of file
src/components/vote/index.jsx
...@@ -5,7 +5,7 @@ import func from "../../util/commonFunc"; ...@@ -5,7 +5,7 @@ import func from "../../util/commonFunc";
import moment from "moment"; import moment from "moment";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { bindActionCreators } from "redux"; import { bindActionCreators } from "redux";
import { VoteListApi, voteSumbitApi } from "./action"; import { VoteListApi, voteSumbitApi, voteSumbitSecondApi } from "./action";
import { Modal } from "antd-mobile"; import { Modal } from "antd-mobile";
class Vote extends Component { class Vote extends Component {
constructor(props) { constructor(props) {
...@@ -13,8 +13,8 @@ class Vote extends Component { ...@@ -13,8 +13,8 @@ class Vote extends Component {
this.state = { this.state = {
list: [], list: [],
modalStatu: false, modalStatu: false,
oldVoteNum: 0, // oldVoteNum: 0,
// oldVoteNum: this.props.location.query.voteNum, oldVoteNum: this.props.location.query.voteNum,
voteNum: this.props.location.query.voteNum, voteNum: this.props.location.query.voteNum,
}; };
} }
...@@ -99,14 +99,19 @@ class Vote extends Component { ...@@ -99,14 +99,19 @@ class Vote extends Component {
</div> </div>
<div <div
className={ className={
item.actived ? "top-btn-select" : "top-btn-selected" oldVoteNum != 0 && item.actived
? "top-btn-select"
: "top-btn-selected"
} }
onClick={() => { onClick={() => {
this.handleVote(item, voteNum); this.handleVote(item, voteNum, oldVoteNum);
}} }}
> >
{item.actived ? "投票" : "已投票"} {item.actived ? "投票" : "已投票"}
</div> </div>
<div className="score">
{item.score}
</div>
<Modal <Modal
title="" title=""
visible={this.state.modalStatu} visible={this.state.modalStatu}
...@@ -159,19 +164,20 @@ class Vote extends Component { ...@@ -159,19 +164,20 @@ class Vote extends Component {
}); });
}; };
// 投票 // 投票
handleVote = (item, voteNum) => { handleVote = (item, voteNum, oldVoteNum) => {
let _this = this; if (oldVoteNum != 0) {
let _this = this;
if (voteNum == 0) { if (voteNum == 0) {
_this.setState({
modalStatu: true,
});
} else {
if (item.actived) {
_this.setState({ _this.setState({
voteNum: voteNum - 1, modalStatu: true,
}); });
item.actived = false; } else {
if (item.actived) {
_this.setState({
voteNum: voteNum - 1,
});
item.actived = false;
}
} }
} }
}; };
...@@ -217,8 +223,15 @@ class Vote extends Component { ...@@ -217,8 +223,15 @@ class Vote extends Component {
modalStatu: true, modalStatu: true,
}); });
} else { } else {
_this.props.voteSumbitApi(params, (response) => { _this.props.voteSumbitApi(params, () => {
console.log(response); _this.props.voteSumbitSecondApi(params, (response) => {
console.log(response);
response.map((item)=>{
list.map((item1)=>{
item1['score']=item.score
})
})
});
}); });
} }
} }
...@@ -236,6 +249,7 @@ const mapDispatchToProps = (dispatch) => { ...@@ -236,6 +249,7 @@ const mapDispatchToProps = (dispatch) => {
return { return {
VoteListApi: bindActionCreators(VoteListApi, dispatch), VoteListApi: bindActionCreators(VoteListApi, dispatch),
voteSumbitApi: bindActionCreators(voteSumbitApi, dispatch), voteSumbitApi: bindActionCreators(voteSumbitApi, dispatch),
voteSumbitSecondApi: bindActionCreators(voteSumbitSecondApi, dispatch),
}; };
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Vote); export default connect(mapStateToProps, mapDispatchToProps)(Vote);
src/components/vote/style.css
...@@ -148,52 +148,137 @@ ...@@ -148,52 +148,137 @@
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
padding: 60px; padding: 30px;
border-radius: 40px; border-radius: 30px;
} }
.vote-out .detail-box .detail-name { .vote-out .detail-box .detail-name {
font-size: 40px; font-size: 40px;
color: #353535; color: #353535;
font-family: PingFang SC, PingFang SC-600; font-family: PingFang SC, PingFang SC-600;
font-weight: 600; font-weight: 600;
display: flex;
align-items: center;
} }
.vote-out .detail-box .detail-img { .vote-out .detail-box .detail-img {
margin: 30px 0; margin-top: 10px;
} }
.vote-out .detail-box .detail-img img { .vote-out .detail-box .detail-img img {
width: 100%; width: 100%;
border-radius: 20px;
} }
.vote-out .detail-box .detail-content { .vote-out .detail-box .detail-content {
text-indent: 2em;
background-color: #f7f7f7;
padding: 20px;
color: #333; color: #333;
font-size: 30px; font-size: 30px;
line-height: 60px; line-height: 60px;
border-radius: 20px;
transform: translateY(-20px);
} }
.vote-out .charts-box { .vote-out .charts-box {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
justify-content: space-between;
} }
.vote-out .charts-box .charts-top { .vote-out .charts-box .charts-top {
display: flex; display: flex;
justify-content: center;
} }
.vote-out .charts-box .charts-top .charts { .vote-out .charts-box .charts-top .charts {
width: 30%; width: 33%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
.vote-out .charts-box .charts-top .charts .top-img2 { .vote-out .charts-box .charts-top .charts .top-img {
width: 180px; width: 180px;
height: 180px; height: 180px;
transform: translateY(75px);
position: relative;
}
.vote-out .charts-box .charts-top .charts .top-img img {
width: 100%;
height: 100%;
}
.vote-out .charts-box .charts-top .charts .top-img .info-img1 {
position: absolute;
top: 51px;
left: 30px;
width: 150px;
height: 150px;
z-index: -1;
}
.vote-out .charts-box .charts-top .charts .top-img .info-img1 img {
border-radius: 50%; border-radius: 50%;
} }
.vote-out .charts-box .charts-top .charts .top-img2 img { .vote-out .charts-box .charts-top .charts .top-img .info-img2 {
width: 80%; position: absolute;
height: 80%; top: 12px;
left: 26px;
width: 130px;
height: 130px;
z-index: -1;
}
.vote-out .charts-box .charts-top .charts .top-img .info-img2 img {
border-radius: 50%; border-radius: 50%;
} }
.vote-out .charts-box .charts-top .charts .top-info { .vote-out .charts-box .charts-top .charts .top-info {
padding: 40px 0; width: 100%;
padding: 80px 0px;
border-radius: 20px;
text-align: center; text-align: center;
background: linear-gradient(0deg, #d64231 0%, #ff7060 100%); background: linear-gradient(0deg, #d64231 0%, #ff7060 100%);
padding-bottom: 160px;
} }
.vote-out .charts-box .charts-top .charts .top-info .info-font { .vote-out .charts-box .charts-top .charts .top-info .info-font {
font-size: 40px; font-size: 40px;
color: #fff; color: #fff;
} }
.vote-out .charts-box .charts-top .charts1 {
width: 35%;
transform: translateY(-60px);
}
.vote-out .charts-box .charts-top .charts2 {
transform: translateY(-10px);
transform: translateX(15px);
}
.vote-out .charts-box .charts-top .charts3 {
transform: translateX(-15px);
}
.vote-out .charts-box .charts-content {
background-color: #fff;
border-radius: 30px;
padding: 40px 40px;
padding-bottom: 10px;
transform: translateY(-80px);
}
.vote-out .charts-box .charts-content .content-box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e6e8;
}
.vote-out .charts-box .charts-content .content-box .user_info {
width: 100px;
height: 25px;
line-height: 25px;
text-align: justify;
}
.vote-out .charts-box .charts-content .content-box .user_info span {
display: inline-block;
padding-left: 100%;
}
.vote-out .charts-box .charts-content .content-box .score {
width: 10%;
color: #E86D57;
font-size: 32px;
display: flex;
align-items: center;
}
.vote-out .charts-box .charts-content .content-box:last-child {
border-bottom: 0px;
}
src/components/vote/style.less
...@@ -158,57 +158,143 @@ ...@@ -158,57 +158,143 @@
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
padding: 60px; padding: 30px;
border-radius: 40px; border-radius: 30px;
.detail-name { .detail-name {
font-size: 40px; font-size: 40px;
color: #353535; color: #353535;
font-family: PingFang SC, PingFang SC-600; font-family: PingFang SC, PingFang SC-600;
font-weight: 600; font-weight: 600;
display: flex;
align-items: center;
} }
.detail-img { .detail-img {
margin: 30px 0; margin-top: 10px;
img { img {
width: 100%; width: 100%;
border-radius: 20px;
} }
} }
.detail-content { .detail-content {
text-indent: 2em;
background-color: #f7f7f7;
padding: 20px;
color: #333; color: #333;
font-size: 30px; font-size: 30px;
line-height: 60px; line-height: 60px;
border-radius: 20px;
transform: translateY(-20px);
} }
} }
//排行榜 //排行榜
.charts-box { .charts-box {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
justify-content: space-between;
.charts-top { .charts-top {
display: flex; display: flex;
justify-content: center;
.charts { .charts {
width: 30%; width: 33%;
.top-img2 { display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.top-img {
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 50%; transform: translateY(75px);
// background-image: url(./top2.png); position: relative;
// background-size: 100%;
// background-repeat: no-repeat;
img { img {
width: 80%; width: 100%;
height: 80%; height: 100%;
border-radius: 50%; }
.info-img1 {
position: absolute;
top: 51px;
left: 30px;
width: 150px;
height: 150px;
z-index: -1;
img {
border-radius: 50%;
}
}
.info-img2 {
position: absolute;
top: 12px;
left: 26px;
width: 130px;
height: 130px;
z-index: -1;
img {
border-radius: 50%;
}
} }
} }
.top-info { .top-info {
padding: 40px 0; width: 100%;
padding: 80px 0px;
border-radius: 20px;
text-align: center; text-align: center;
background: linear-gradient(0deg, #d64231 0%, #ff7060 100%); background: linear-gradient(0deg, #d64231 0%, #ff7060 100%);
padding-bottom: 160px;
.info-font { .info-font {
font-size: 40px; font-size: 40px;
color: #fff; color: #fff;
} }
} }
} }
.charts1 {
width: 35%;
transform: translateY(-60px);
}
.charts2 {
transform: translateY(-10px);
transform: translateX(15px);
}
.charts3 {
transform: translateX(-15px);
}
}
.charts-content{
background-color: #fff;
border-radius: 30px;
padding:40px 40px;
padding-bottom: 10px;
transform: translateY(-80px);
.content-box{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom:20px;
border-bottom: 1px solid #e5e6e8;
.user_info {
width: 100px;
height: 25px;
line-height: 25px;
text-align: justify; //主要对齐属性
span {
display: inline-block;
padding-left: 100%;
}
}
.score{
width: 10%;
display: flex;
color: #E86D57;
font-size: 32px;
display: flex;
align-items: center;
}
}
.content-box:last-child{
border-bottom: 0px;
}
} }
} }
} }
src/components/vote/theCharts.jsx
...@@ -2,10 +2,12 @@ import React, { Component } from "react"; ...@@ -2,10 +2,12 @@ import React, { Component } from "react";
import "./style.less"; import "./style.less";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { bindActionCreators } from "redux"; import { bindActionCreators } from "redux";
import { VoteListApi } from "./action"; import { voteTopApi } from "./action";
import test from './test.png' import top2 from "./top2.png";
import top2 from './top2.png' import top1 from "./top1.png";
class VoteDetail extends Component { import top3 from "./top3.png";
class TheCharts extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -13,50 +15,209 @@ class VoteDetail extends Component { ...@@ -13,50 +15,209 @@ class VoteDetail extends Component {
}; };
} }
componentDidMount() {} componentDidMount() {
let _this = this;
let { id } = this.props.location.query;
let params = {
id: id,
};
this.props.voteTopApi(params, (response) => {
_this.setState({
list: response.rankingList,
});
});
}
render() { render() {
// let { content, keywords, name, img } = this.props.location.query; // let { content, keywords, name, img } = this.props.location.query;
let { list } = this.state; let { list } = this.state;
let keywords = '进取之美'
let keywords1 = list[0]?.keywords;
let keywords2 = list[1]?.keywords;
let keywords3 = list[2]?.keywords;
let content1 = list[0]?.content;
let content2 = list[1]?.content;
let content3 = list[2]?.content;
let topImg1 = list[0]?.contentAppendixUrl;
let topImg2 = list[1]?.contentAppendixUrl;
let topImg3 = list[2]?.contentAppendixUrl;
let topScore1 = list[0]?.voteCount;
let topScore2 = list[1]?.voteCount;
let topScore3 = list[2]?.voteCount;
3;
let topList = list.splice(3, 9);
console.log(topList, "333333333333");
return ( return (
<div className="vote-out"> <div className="vote-out">
<div className="charts-box"> <div className="charts-box">
<div className="charts-top"> <div className="charts-top">
<div className="charts"> <div className="charts charts2">
<div className="top-img2"> <div className="top-img">
<img src={top2} alt="" /> <img src={top2} alt="" />
{/* <img src={test} alt="" /> */} <div className="info-img2">
<img src={topImg2} alt="" />
</div>
</div> </div>
<div className="top-info"> <div className="top-info">
<p className="info-font">柳轶倩</p> <p className="info-font">{content2}</p>
<div className="detail-content"> <div className="detail-content">
<span <span
className={ className={
keywords == "精石之美" keywords2 == "精石之美"
? "cont-icon1" ? "cont-icon1"
: keywords == "突破之美" : keywords2 == "突破之美"
? "cont-icon2" ? "cont-icon2"
: keywords == "进取之美" : keywords2 == "进取之美"
? "cont-icon3" ? "cont-icon3"
: "cont-icon4" : "cont-icon4"
} }
> >
{keywords} {keywords2}
</span> </span>
</div> </div>
<p className="info-font">142票</p> <p className="info-font">
{topScore2}
<span style={{ fontSize: "34px" }}>票</span>
</p>
</div> </div>
</div> </div>
<div className="charts"> <div className="charts charts1">
<div className="top-img1"></div> <div
<div className="top-info"></div> className="top-img"
style={{ width: "220px", height: "220px" }}
>
<img src={top1} alt="" />
<div className="info-img1">
<img src={topImg1} alt="" />
</div>
</div>
<div className="top-info">
<p className="info-font">{content1}</p>
<div className="detail-content">
<span
className={
keywords1 == "精石之美"
? "cont-icon1"
: keywords1 == "突破之美"
? "cont-icon2"
: keywords1 == "进取之美"
? "cont-icon3"
: "cont-icon4"
}
>
{keywords1}
</span>
</div>
<p className="info-font">
{topScore1}
<span style={{ fontSize: "34px" }}>票</span>
</p>
</div>
</div> </div>
<div className="charts"> <div className="charts charts3">
<div className="top-img3"></div> <div className="top-img">
<div className="top-info"></div> <img src={top3} alt="" />
<div className="info-img2">
<img src={topImg3} alt="" />
</div>
</div>
<div className="top-info">
<p className="info-font">{content3}</p>
<div className="detail-content">
<span
className={
keywords3 == "精石之美"
? "cont-icon1"
: keywords3 == "突破之美"
? "cont-icon2"
: keywords3 == "进取之美"
? "cont-icon3"
: "cont-icon4"
}
>
{keywords3}
</span>
</div>
<p className="info-font">
{topScore3}
<span style={{ fontSize: "34px" }}>票</span>
</p>
</div>
</div> </div>
</div> </div>
<div className="charts-content">
{topList.map((item, index) => {
return (
<div className="content-box">
<div
style={{
display: "flex",
alignItems: "center",
width: "90%",
}}
>
<div
style={{
color: "#E6624A",
fontSize: "40px",
fontWeight: "bold",
marginRight: "30px",
}}
>
{index < 6 ? `0` + (index + 4) : index + 4}
</div>
<div
style={{
width: "100px",
height: "100px",
marginRight: "30px",
}}
>
<img
style={{
width: "100%",
height: "100%",
borderRadius: "50%",
}}
src={item.contentAppendixUrl}
alt=""
/>
</div>
<div
className="user_info"
style={{
color: "#333",
fontSize: "32px",
marginRight: "30px",
}}
>
{item.content}
<span> </span>
</div>
<div className="detail-content">
<span
className={
keywords2 == "精石之美"
? "cont-icon1"
: keywords2 == "突破之美"
? "cont-icon2"
: keywords2 == "进取之美"
? "cont-icon3"
: "cont-icon4"
}
>
{keywords2}
</span>
</div>
</div>
<div className="score">
{item.voteCount}
<span style={{ fontSize: "28px" }}>票</span>
</div>
</div>
);
})}
</div>
</div> </div>
</div> </div>
); );
...@@ -67,7 +228,7 @@ const mapStateToProps = (state) => { ...@@ -67,7 +228,7 @@ const mapStateToProps = (state) => {
}; };
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
VoteListApi: bindActionCreators(VoteListApi, dispatch), voteTopApi: bindActionCreators(voteTopApi, dispatch),
}; };
}; };
export default connect(mapStateToProps, mapDispatchToProps)(VoteDetail); export default connect(mapStateToProps, mapDispatchToProps)(TheCharts);
src/components/vote/top1.png
src/components/vote/top1.png

7.03 KB | W: | H:

src/components/vote/top1.png

12.6 KB | W: | H:

src/components/vote/top1.png
src/components/vote/top1.png
src/components/vote/top1.png
src/components/vote/top1.png
  • 2-up
  • Swipe
  • Onion skin
src/components/vote/top2.png
src/components/vote/top2.png

5.82 KB | W: | H:

src/components/vote/top2.png

11.7 KB | W: | H:

src/components/vote/top2.png
src/components/vote/top2.png
src/components/vote/top2.png
src/components/vote/top2.png
  • 2-up
  • Swipe
  • Onion skin
src/components/vote/top3.png
src/components/vote/top3.png

5.88 KB | W: | H:

src/components/vote/top3.png

12.1 KB | W: | H:

src/components/vote/top3.png
src/components/vote/top3.png
src/components/vote/top3.png
src/components/vote/top3.png
  • 2-up
  • Swipe
  • Onion skin
src/components/vote/voteDetail.jsx
...@@ -18,11 +18,8 @@ class VoteDetail extends Component { ...@@ -18,11 +18,8 @@ class VoteDetail extends Component {
return ( return (
<div className="vote-out"> <div className="vote-out">
<div className="detail-box"> <div className="detail-box">
<div className="detail-name">{name}</div> <div className="detail-name">
<div className="detail-img">
<img src={img} alt="" />
</div>
<div className="detail-content">
<span <span
className={ className={
keywords == "精石之美" keywords == "精石之美"
...@@ -36,8 +33,12 @@ class VoteDetail extends Component { ...@@ -36,8 +33,12 @@ class VoteDetail extends Component {
> >
{keywords} {keywords}
</span> </span>
{content} {name}
</div> </div>
<div className="detail-img">
<img src={img} alt="" />
</div>
<div className="detail-content">{content}</div>
</div> </div>
</div> </div>
); );
...@@ -47,7 +48,6 @@ const mapStateToProps = (state) => { ...@@ -47,7 +48,6 @@ const mapStateToProps = (state) => {
return {}; return {};
}; };
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {};
};
}; };
export default connect(mapStateToProps, mapDispatchToProps)(VoteDetail); export default connect(mapStateToProps, mapDispatchToProps)(VoteDetail);
src/index.css
...@@ -403,10 +403,10 @@ p { ...@@ -403,10 +403,10 @@ p {
vertical-align: -0.05rem; vertical-align: -0.05rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0.3rem auto; background-size: 0.3rem auto;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'38'%20height%3D'36'%20viewBox%3D'0%200%2038%2036'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M29.05%2025.23a15.81%2015.81%200%200%200%203.004-9.294c0-8.8-7.17-15.934-16.017-15.934C7.192.002.02%207.136.02%2015.936c0%208.802%207.172%2015.937%2016.017%2015.937%204.148%200%207.928-1.569%2010.772-4.143l8.873%208.232%202.296-2.45-8.927-8.282zM16.2%2028.933c-7.19%200-13.04-5.788-13.04-12.903%200-7.113%205.85-12.904%2013.04-12.904%207.19%200%2012.9%205.79%2012.9%2012.904%200%207.115-5.71%2012.903-12.9%2012.903z'%20fill%3D'%23bbb'%20fill-rule%3D'evenodd'%2F%3E%3C%2Fsvg%3E"); background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzOCAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC45Ij4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy43MzU2IDMzLjQ3MTFDOC40OTI3NiAzMy40NzExIDEgMjUuOTc4MyAxIDE2LjczNTZDMSA3LjQ5Mjc2IDguNDkyNzYgMCAxNy43MzU2IDBDMjYuOTc4MyAwIDM0LjQ3MTEgNy40OTI3NiAzNC40NzExIDE2LjczNTZDMzQuNDcxMSAyMC43ODYgMzMuMDMyMiAyNC41MDA0IDMwLjYzNzYgMjcuMzk1NEwzNi41MzU2IDMzLjI5MzRDMzcuMTU0OCAzMy45MTI2IDM3LjE1NDggMzQuOTE2NSAzNi41MzU2IDM1LjUzNTZDMzUuOTE2NSAzNi4xNTQ4IDM0LjkxMjYgMzYuMTU0OCAzNC4yOTM0IDM1LjUzNTZMMjguMzk1NCAyOS42Mzc2QzI1LjUwMDQgMzIuMDMyMiAyMS43ODYgMzMuNDcxMSAxNy43MzU2IDMzLjQ3MTFaTTE3LjczNTYgMzAuMzAwMkMyNS4yMjcxIDMwLjMwMDIgMzEuMzAwMiAyNC4yMjcxIDMxLjMwMDIgMTYuNzM1NkMzMS4zMDAyIDkuMjQ0MDMgMjUuMjI3MSAzLjE3MDk1IDE3LjczNTYgMy4xNzA5NUMxMC4yNDQxIDMuMTcwOTUgNC4xNzA5NyA5LjI0NDAzIDQuMTcwOTcgMTYuNzM1NkM0LjE3MDk3IDI0LjIyNzEgMTAuMjQ0MSAzMC4zMDAyIDE3LjczNTYgMzAuMzAwMloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==");
} }
#wmy-root-body .am-search-input .am-search-synthetic-ph-placeholder { #wmy-root-body .am-search-input .am-search-synthetic-ph-placeholder {
color: #bbb; color: #fff;
font-size: 0.3rem; font-size: 0.3rem;
} }
#wmy-root-body .am-search-input input[type="search"] { #wmy-root-body .am-search-input input[type="search"] {
......
src/index.less
...@@ -471,11 +471,11 @@ p { ...@@ -471,11 +471,11 @@ p {
vertical-align: -0.05rem; vertical-align: -0.05rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0.3rem auto; background-size: 0.3rem auto;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'38'%20height%3D'36'%20viewBox%3D'0%200%2038%2036'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M29.05%2025.23a15.81%2015.81%200%200%200%203.004-9.294c0-8.8-7.17-15.934-16.017-15.934C7.192.002.02%207.136.02%2015.936c0%208.802%207.172%2015.937%2016.017%2015.937%204.148%200%207.928-1.569%2010.772-4.143l8.873%208.232%202.296-2.45-8.927-8.282zM16.2%2028.933c-7.19%200-13.04-5.788-13.04-12.903%200-7.113%205.85-12.904%2013.04-12.904%207.19%200%2012.9%205.79%2012.9%2012.904%200%207.115-5.71%2012.903-12.9%2012.903z'%20fill%3D'%23bbb'%20fill-rule%3D'evenodd'%2F%3E%3C%2Fsvg%3E"); background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzOCAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC45Ij4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy43MzU2IDMzLjQ3MTFDOC40OTI3NiAzMy40NzExIDEgMjUuOTc4MyAxIDE2LjczNTZDMSA3LjQ5Mjc2IDguNDkyNzYgMCAxNy43MzU2IDBDMjYuOTc4MyAwIDM0LjQ3MTEgNy40OTI3NiAzNC40NzExIDE2LjczNTZDMzQuNDcxMSAyMC43ODYgMzMuMDMyMiAyNC41MDA0IDMwLjYzNzYgMjcuMzk1NEwzNi41MzU2IDMzLjI5MzRDMzcuMTU0OCAzMy45MTI2IDM3LjE1NDggMzQuOTE2NSAzNi41MzU2IDM1LjUzNTZDMzUuOTE2NSAzNi4xNTQ4IDM0LjkxMjYgMzYuMTU0OCAzNC4yOTM0IDM1LjUzNTZMMjguMzk1NCAyOS42Mzc2QzI1LjUwMDQgMzIuMDMyMiAyMS43ODYgMzMuNDcxMSAxNy43MzU2IDMzLjQ3MTFaTTE3LjczNTYgMzAuMzAwMkMyNS4yMjcxIDMwLjMwMDIgMzEuMzAwMiAyNC4yMjcxIDMxLjMwMDIgMTYuNzM1NkMzMS4zMDAyIDkuMjQ0MDMgMjUuMjI3MSAzLjE3MDk1IDE3LjczNTYgMy4xNzA5NUMxMC4yNDQxIDMuMTcwOTUgNC4xNzA5NyA5LjI0NDAzIDQuMTcwOTcgMTYuNzM1NkM0LjE3MDk3IDI0LjIyNzEgMTAuMjQ0MSAzMC4zMDAyIDE3LjczNTYgMzAuMzAwMloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==");
} }
.am-search-input .am-search-synthetic-ph-placeholder { .am-search-input .am-search-synthetic-ph-placeholder {
color: #bbb; color: #fff;
font-size: 0.3rem; font-size: 0.3rem;
} }
......
src/util/urlconfig.js
...@@ -444,5 +444,7 @@ const url = { ...@@ -444,5 +444,7 @@ const url = {
//投票列表数据 //投票列表数据
voteListApi:`${baseUrl}${WEBSTUDENT}api/researchQuestion/list/all`, voteListApi:`${baseUrl}${WEBSTUDENT}api/researchQuestion/list/all`,
voteSumbitApi:`${baseUrl}${WEBSTUDENT}api/researchAnswer/submit`, voteSumbitApi:`${baseUrl}${WEBSTUDENT}api/researchAnswer/submit`,
voteSumbitSecondApi:`${baseUrl}${WEBSTUDENT}api/researchQuestion/getVoteResult`,
voteTopApi:`${baseUrl}${WEBSTUDENT}api/researchQuestion/getVoteTop`,
}; };
export default url; export default url;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment