|
@@ -1,266 +1,191 @@
|
|
|
-<template>
|
|
|
- <view class="theme">
|
|
|
- <view class="title">请先选定一个主题进行追踪</view>
|
|
|
- <view class="content">
|
|
|
- <view class="item"
|
|
|
- v-for="(item, index) in themeList"
|
|
|
- @click="checkedHandle(item,index)"
|
|
|
- :key="index">
|
|
|
- <div class="up">
|
|
|
- <view class="left">
|
|
|
- <image :src="`../../static/theme${item.id}.png`"></image>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <text>{{item.title}}</text>
|
|
|
- <text>{{item.des}}</text>
|
|
|
- </view>
|
|
|
- </div>
|
|
|
- <!-- <div class="down" v-if="index == 1">
|
|
|
- <div class="leftBtn" @click="checkedHandle(item,index,'NORMAL')">普通</div>
|
|
|
- <div class="rightBtn" @click="checkedHandle(item,index,'MULTI')">督查+自查</div>
|
|
|
- </div> -->
|
|
|
- <!-- <div class="mid">
|
|
|
- <view class="left">
|
|
|
- <image :src="`../../static/theme${item.id}.png`"></image>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <text>{{item.title}}</text>
|
|
|
- <text>{{item.des}}</text>
|
|
|
- </view>
|
|
|
- </div>
|
|
|
- <div class="down">
|
|
|
- <view class="left">
|
|
|
- <image :src="`../../static/theme${item.id}.png`"></image>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <text>{{item.title}}</text>
|
|
|
- <text>{{item.des}}</text>
|
|
|
- </view>
|
|
|
- </div> -->
|
|
|
- <image class="checkmark" v-if="theme.id === item.id" src="../../../static/theme.png"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { mapState } from "vuex";
|
|
|
- import {themeList} from "./utils.js";
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- themeList
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState({
|
|
|
- theme: state => state.creatingSituations.theme
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * @param {Object} item 操作数据
|
|
|
- * @param {number} index 操作下标
|
|
|
- * @param {string} type 操作类型
|
|
|
- */
|
|
|
- checkedHandle: function(item,index,type) {
|
|
|
- //by yfb 20230210 修改入口
|
|
|
- // if(index==0||(index == 1&&type == 'NORMAL')){
|
|
|
- // //个案/普通系统追踪
|
|
|
- // this.myCommit('theme',{...item,type:'NORMAL'});
|
|
|
- // this.myCommit('needReload', true);
|
|
|
- // this.myCommit('stepActive', 1);
|
|
|
- // }
|
|
|
- // if(index == 1 && type == 'MULTI'){
|
|
|
- // //督查+自查
|
|
|
- // this.myCommit('theme',{...item,type:type});
|
|
|
- // this.myCommit('needReload', true);
|
|
|
- // this.myCommit('stepActive', 1);
|
|
|
-
|
|
|
- // }
|
|
|
- if(index==0||index==1){
|
|
|
- //个案/普通系统追踪
|
|
|
- this.myCommit('theme',{...item,type:'NORMAL'});
|
|
|
- this.myCommit('needReload', true);
|
|
|
- this.myCommit('stepActive', 1);
|
|
|
- }
|
|
|
- if(index == 2){
|
|
|
- //督查+自查
|
|
|
- this.myCommit('theme',{...item,type:'MULTI'});
|
|
|
- this.myCommit('needReload', true);
|
|
|
- this.myCommit('stepActive', 1);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- myCommit: function(key, data) {
|
|
|
- this.$store.commit({type: 'creatingSituations/comChangeState',key,data});
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
- .theme {
|
|
|
- overflow: hidden;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .item {
|
|
|
- position: relative;
|
|
|
- width:90%;
|
|
|
- margin: 0 auto;
|
|
|
- border-radius: 15rpx;
|
|
|
- background: linear-gradient(270deg, #6697FE 0%, #4980F2 100%);
|
|
|
- box-shadow: 0 12.5rpx 12.5rpx 0 rgba(73, 128, 242, 0.2);
|
|
|
- margin-bottom: 22px;
|
|
|
-
|
|
|
- .checkmark {
|
|
|
- position: absolute;
|
|
|
- top: 10rpx;
|
|
|
- right: 10rpx;
|
|
|
- width: 46.87rpx;
|
|
|
- height: 46.87rpx;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .up {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- // padding: 37.5rpx 50rpx;
|
|
|
- padding: 37.5rpx 20rpx;
|
|
|
- // >image {
|
|
|
- // position: absolute;
|
|
|
- // top: 10rpx;
|
|
|
- // right: 10rpx;
|
|
|
- // width: 46.87rpx;
|
|
|
- // height: 46.87rpx;
|
|
|
- // }
|
|
|
-
|
|
|
- .left {
|
|
|
- margin-right: 25rpx;
|
|
|
- image {
|
|
|
- width: 112.5rpx;
|
|
|
- height: 112.5rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- text {
|
|
|
- font-size: 17.5rpx;
|
|
|
- line-height: 25rpx;
|
|
|
- color: #fff;
|
|
|
- &:first-child {
|
|
|
- margin-bottom: 5rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 45rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .mid {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding-bottom:50rpx;
|
|
|
- .left {
|
|
|
- margin-right: 25rpx;
|
|
|
- image {
|
|
|
- width: 112.5rpx;
|
|
|
- height: 112.5rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- text {
|
|
|
- font-size: 17.5rpx;
|
|
|
- line-height: 25rpx;
|
|
|
- color: #fff;
|
|
|
- &:first-child {
|
|
|
- margin-bottom: 5rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 45rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // .leftBtn,.rightBtn {
|
|
|
- // width: 237.5rpx;
|
|
|
- // height: 62.5rpx;
|
|
|
- // line-height:62.5rpx;
|
|
|
- // background: #FFFFFF;
|
|
|
- // border-radius: 31.25rpx;
|
|
|
- // text-align: center;
|
|
|
- // font-size: 30rpx;
|
|
|
- // font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
|
|
- // font-weight: 500;
|
|
|
- // color: #4980F2;
|
|
|
- // }
|
|
|
- // .rightBtn {
|
|
|
- // margin-left: 37.5rpx;
|
|
|
- // }
|
|
|
- }
|
|
|
- .down {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding-bottom:50rpx;
|
|
|
- .left {
|
|
|
- margin-right: 25rpx;
|
|
|
- image {
|
|
|
- width: 112.5rpx;
|
|
|
- height: 112.5rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- text {
|
|
|
- font-size: 17.5rpx;
|
|
|
- line-height: 25rpx;
|
|
|
- color: #fff;
|
|
|
- &:first-child {
|
|
|
- margin-bottom: 5rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 45rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // .leftBtn,.rightBtn {
|
|
|
- // width: 237.5rpx;
|
|
|
- // height: 62.5rpx;
|
|
|
- // line-height:62.5rpx;
|
|
|
- // background: #FFFFFF;
|
|
|
- // border-radius: 31.25rpx;
|
|
|
- // text-align: center;
|
|
|
- // font-size: 30rpx;
|
|
|
- // font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
|
|
- // font-weight: 500;
|
|
|
- // color: #499DF2;
|
|
|
- // }
|
|
|
- // .rightBtn {
|
|
|
- // margin-left: 37.5rpx;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- margin-top: 125rpx;
|
|
|
- // margin-bottom: 125rpx;
|
|
|
- margin-bottom: 40rpx;
|
|
|
- background: linear-gradient(270deg, #00CCBB 0%, #00CCAA 100%);
|
|
|
- box-shadow: 0 12.5rpx 12.5rpx 0 rgba(0, 204, 170, 0.2);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="theme">
|
|
|
+ <view class="title">请先选定一个主题进行追踪</view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="item"
|
|
|
+ v-for="(item, index) in themeList"
|
|
|
+ @click="checkedHandle(item,index)"
|
|
|
+ :key="index">
|
|
|
+ <div class="up">
|
|
|
+ <view class="left">
|
|
|
+ <image :src="`../../static/theme${item.id}.png`"></image>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view>
|
|
|
+ <text>{{item.title}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="descontent">
|
|
|
+ <text>{{item.des}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="down" v-if="index == 1">
|
|
|
+ <div class="leftBtn" @click="checkedHandle(item,index,'NORMAL')">普通</div>
|
|
|
+ <div class="rightBtn" @click="checkedHandle(item,index,'MULTI')">督查+自查</div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <image class="checkmark" v-if="theme.id === item.id" src="../../../static/theme.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapState } from "vuex";
|
|
|
+ import {themeList} from "./utils.js";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ themeList
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ theme: state => state.creatingSituations.theme
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * @param {Object} item 操作数据
|
|
|
+ * @param {number} index 操作下标
|
|
|
+ * @param {string} type 操作类型
|
|
|
+ */
|
|
|
+ checkedHandle: function(item,index,type) {
|
|
|
+ //by yfb 20230210 修改入口
|
|
|
+ // if(index==0||(index == 1&&type == 'NORMAL')){
|
|
|
+ // //个案/普通系统追踪
|
|
|
+ // this.myCommit('theme',{...item,type:'NORMAL'});
|
|
|
+ // this.myCommit('needReload', true);
|
|
|
+ // this.myCommit('stepActive', 1);
|
|
|
+ // }
|
|
|
+ // if(index == 1 && type == 'MULTI'){
|
|
|
+ // //督查+自查
|
|
|
+ // this.myCommit('theme',{...item,type:type});
|
|
|
+ // this.myCommit('needReload', true);
|
|
|
+ // this.myCommit('stepActive', 1);
|
|
|
+
|
|
|
+ // }
|
|
|
+ if(index==0||index==1){
|
|
|
+ //个案/普通系统追踪
|
|
|
+ this.myCommit('theme',{...item,type:'NORMAL'});
|
|
|
+ this.myCommit('needReload', true);
|
|
|
+ this.myCommit('stepActive', 1);
|
|
|
+ }
|
|
|
+ if(index == 2){
|
|
|
+ //督查+自查
|
|
|
+ this.myCommit('theme',{...item,type:'MULTI'});
|
|
|
+ this.myCommit('needReload', true);
|
|
|
+ this.myCommit('stepActive', 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ myCommit: function(key, data) {
|
|
|
+ this.$store.commit({type: 'creatingSituations/comChangeState',key,data});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .theme {
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .item {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 92%;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ background: linear-gradient(270deg, #6697FE 0%, #4980F2 100%);
|
|
|
+ box-shadow: 0 20rpx 20rpx 0 rgba(73, 128, 242, 0.2);
|
|
|
+ margin-bottom: 18px;
|
|
|
+
|
|
|
+
|
|
|
+ .checkmark {
|
|
|
+ position: absolute;
|
|
|
+ top: 10rpx;
|
|
|
+ right: 10rpx;
|
|
|
+ width: 46.87rpx;
|
|
|
+ height: 46.87rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .up {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ // padding: 37.5rpx 50rpx;
|
|
|
+ padding: 37.5rpx 25rpx;
|
|
|
+ //min-height: 90%;
|
|
|
+ // >image {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 10rpx;
|
|
|
+ // right: 10rpx;
|
|
|
+ // width: 46.87rpx;
|
|
|
+ // height: 46.87rpx;
|
|
|
+ // }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ image {
|
|
|
+ width: 112.5rpx;
|
|
|
+ height: 112.5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ text {
|
|
|
+ font-size: 17.5rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 5rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 45rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .descontent{
|
|
|
+ //height:60%;
|
|
|
+ // margin-top:5px;
|
|
|
+ text {
|
|
|
+ font-size: 12rpx;
|
|
|
+ line-height: 25rpx;
|
|
|
+ font-weight: normal;
|
|
|
+ color: rgba(255,255,255,0.8);
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 5rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ //font-weight: ;
|
|
|
+ line-height: 25rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ //margin-top: 70rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ // margin-bottom: 125rpx;
|
|
|
+ // margin-bottom: 32rpx;
|
|
|
+ background: linear-gradient(270deg, #00CCBB 0%, #00CCAA 100%);
|
|
|
+ box-shadow: 0 20rpx 20rpx 0 rgba(0, 204, 170, 0.2);
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ // margin-top: 0rpx;
|
|
|
+ // margin-bottom: 125rpx;
|
|
|
+ // margin-bottom: 32rpx;
|
|
|
+ background: linear-gradient(270deg, #18AAF2 0%, #4DC3FF 100%);
|
|
|
+ box-shadow: 0 20rpx 20rpx 0 rgba(73,157,242, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|