行程主题色

src/assets/css/UpgradedVersion.css

@@ -20,6 +20,11 @@
   display: flex;
   align-items: center;
 }
+.row-ajc{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .row-sb{
   display:flex;
   justify-content: space-between;

src/components/newTravelmanager/TravelGroupControl/TravelConfig.vue

@@ -224,6 +224,11 @@
                 </div>
               </div>
             </div>
+            <!-- <div class="_VideoStr_box">
+              <el-form-item label="行程主题色">
+                <el-color-picker style='vertical-align: middle;' v-model="PostConfig.TripColor"></el-color-picker>
+              </el-form-item>
+            </div> -->
           </el-form>
         </div>
       </div>

src/components/newTravelmanager/TravelGroupControl/TravelFeature.vue

@@ -106,7 +106,7 @@
             <newFeature2 ref='newFeature2' :FeatureData='FeatureData'></newFeature2>
           </div>
           <!--行程特色第三版 -->
-          <UpgradedVersion v-if="FeatureData.FeatureType==8"></UpgradedVersion>
+          <UpgradedVersion :TripColor="TripColor" v-if="FeatureData.FeatureType==8"></UpgradedVersion>
         </div>
       </div>
     </div>
@@ -149,7 +149,7 @@
       // newFeature3,
       UpgradedVersion
     },
-    props: ["subConfigId", "FeatureData", "isNewConfig", "TeamType"],
+    props: ["subConfigId", "FeatureData", "isNewConfig", "TeamType","TripColor"],
     inject: ['loadConfigInfo'],
     data() {
       return {

src/components/newTravelmanager/TravelGroupControl/TravelManager2.vue

@@ -39,7 +39,7 @@
           :subConfig="journeyList" :isOpenGroup="false" :IsDirect="PostConfig.IsDirect" v-bind:AllCityList="AllCityList"
           v-bind:StartCity="StartCity" :UseTypeArray="UseTypeArray" :AirPickUp="AirPickUp" :AirSend="AirSend"
           @change="handlerChangeData" :TeamType="TeamType" :IsOpenHotel="PostConfig.IsOpenHotel"></TravelDaysTripDirect>
-        <TravelFeature :class="{'showOther':(TeamType==3)}" ref="TravelFeature" id="thirdAnchor"
+        <TravelFeature :TripColor="PostConfig.TripColor" :class="{'showOther':(TeamType==3)}" ref="TravelFeature" id="thirdAnchor"
           @featureCallBack="getFeature" :FeatureData="FeatureData" :TeamType="TeamType" :isNewConfig="isNewConfig"
           @unlockFormCommit="unlockFormCommit" :CurrentUserInfo="CurrentUserInfo"></TravelFeature>
         <TravelNotice :class="{'showOther':TeamType==3}" ref="TravelNotice" id="fourAnchor" @headCallBack="getNotice"
@@ -270,6 +270,7 @@
       /*获取组件配置信息【回调方法】*/
       getConfig(configObj) {
         this.PostConfig = configObj;
+        this.PostConfig.TripColor = configObj.TripColor?configObj.TripColor:'#CC6900'//#CC0066
         //没有报价单根据线路设置直采和非直采方式生成线路行程
         if (this.IsHaveOffer == 0) {
           this.NoticeParameters.ConfigId = this.PostConfig.ConfigId;

src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/components/subheading.vue

@@ -16,10 +16,12 @@
           <vEditDiv :canEdit='canEdit' v-model="first"></vEditDiv>
         </div>
         <div class="UpgradedVersion-subIdeTitle absolute">
-          <div class="UpgradedVersion-subIdeTitleBj relative z-index1"></div>
+          <div class="UpgradedVersion-subIdeTitleBj relative z-index1"
+          :style="{'background':TripColor}"></div>
           <div class="UpgradedVersion-sT relative row z-index2">
             <div>
-              <div class="UpgradedVersion-sTL">&nbsp;</div>
+              <div class="UpgradedVersion-sTL"
+              :style="{'background':TripColor}">&nbsp;</div>
             </div>
             <div class="UpgradedVersion-sTR marginL20">
               <div class="UpgradedVersion-sTR-h">
@@ -37,7 +39,8 @@
         <div class="UpgradedVersion-subIdeImgBoxL">
           <img src="http://192.168.10.214:8130/Upload/NewTripFeature/subheadingBj.png"/>
         </div>
-        <div class="UpgradedVersion-subIdeImgBoxR">&nbsp;</div>
+        <div class="UpgradedVersion-subIdeImgBoxR"
+        :style="{'background':TripColor}">&nbsp;</div>
       </div>
     </div>
     <div class="UpgradedVersion-subIdeImgForm">
@@ -75,9 +78,10 @@
     components: {
       vEditDiv
     },
-    props: {
+    props: [
+      'TripColor'
       // FeatureData
-    },
+    ],
     data() {
       return {
         first: '五星级风景美术馆',
@@ -97,12 +101,13 @@
     },
     computed: {},
     watch: {
-      // FeatureData: {
-      //   handler(val, oldVal) {
+      TripColor: {
+        handler(val, oldVal) {
 
-      //   },
-      //   deep: true
-      // },
+        },
+        deep: true,
+        immediate: true
+      },
     },
     mounted() {
 
@@ -183,7 +188,7 @@
 .UpgradedVersion-subIdeTitleBj{
   width: 233px;
   height: 234px;
-  background: #D23181;
+  /* background: #D23181; */
   opacity: 0.2;
   border-radius: 50%;
   left: -24px;
@@ -198,7 +203,7 @@
   width: 17px;
   height: 100%;
   line-height: 62px;
-  background: #CC0066;
+  /* background: #CC0066; */
   border-radius: 9px;
 }
 .UpgradedVersion-sTR{
@@ -242,7 +247,7 @@
 .UpgradedVersion-subIdeImgBoxR{
   margin-left: 12px;
   flex-grow: 1;
-  background: #CC0066;
+  /* background: #CC0066; */
 }
 .UpgradedVersion-subIdeImgForm1{
   top: 919px;

src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/index.vue

@@ -7,18 +7,30 @@
       <!-- logo -->
       <Header></Header>
       <!-- 首页 -->
-      <featureHome v-if="index==0"></featureHome>
+      <featureHome :TripColor="TripColor" v-if="index==0"></featureHome>
       <!-- 其余页 -->
       <div v-if="index>0">
         <headerTitle></headerTitle>
         <!-- 介绍、宿食景页 -->
-        <otherJourney v-if="index==1||index==3"></otherJourney>
+        <otherJourney :TripColor="TripColor" v-if="index==1||index==3"></otherJourney>
         <!-- 行程详情页 -->
-        <UpgradedVersionDetails v-if="index==2"></UpgradedVersionDetails>
+        <UpgradedVersionDetails :TripColor="TripColor" v-if="index==2"></UpgradedVersionDetails>
         <!-- otherJourney-footer 食景日本料理 -->
         <div v-if="index!=0" :class="{'otherJourney-footer':index==3}">
-          <div class="otherJourney-introduceFooter absolute z-index1">
-            <vEditDiv class="absolute z-index2" :canEdit='canEdit' v-model="first"></vEditDiv>
+          <div class="otherJourney-introduceFooter absolute z-index1 row-aic"
+          :style="{'background':index==3?TripColor:''}">
+            <div class="introduceFooterBJ introduceFooterOne"
+            :style="{'background':TripColor}">&nbsp;</div>
+            <div class="introduceFooterBJ introduceFootertTwo"
+            :style="{'background':TripColor}">&nbsp;</div>
+            <div class="introduceFooter-text row-aic" v-if="index!=3">
+              <img src="http://192.168.10.214:8130/Upload/NewTripFeature/footerLogo.png" />
+              <vEditDiv class="z-index2" :canEdit='canEdit' v-model="first"></vEditDiv>
+            </div>
+            <div class="introduceFooterBJ introduceFootertThree"
+            :style="{'background':TripColor}">&nbsp;</div>
+            <div class="introduceFooterBJ introduceFootertFour"
+            :style="{'background':TripColor}">&nbsp;</div>
           </div>
         </div>
       </div>
@@ -43,9 +55,10 @@
       UpgradedVersionDetails,
       vEditDiv,
     },
-    props: {
+    props: [
+      'TripColor'
       // FeatureData
-    },
+    ],
     data() {
       return {
         first: '欧洲线',
@@ -83,23 +96,44 @@
   bottom: 32px;
   width: 100%;
   height: 34px;
-  background: url('http://192.168.10.214:8130/Upload/NewTripFeature/introduceButtom.png')no-repeat center;
+  /* background: url('http://192.168.10.214:8130/Upload/NewTripFeature/introduceButtom.png')no-repeat center; */
   background-size: 100% 100%;
 }
-.otherJourney-introduceFooter .edit_div{
-  width: 70px;
-  height: 27px;
+.introduceFooterBJ{
+  height: 100%;
+}
+.introduceFooterOne{
+  flex-grow: 1;
+  margin-right: 5px;
+}
+.introduceFootertTwo,.introduceFootertThree{
+  width: 7px;
+}
+.introduceFootertFour{
+  width: 120px;
+  margin-left: 5px;
+}
+.introduceFooter-text{
+
+}
+.introduceFooter-text img{
+  width: 28px;
+  height: 28px;
+  display: inline-block;
+  margin: 0 9px;
+}
+.introduceFooter-text .edit_div{
+  line-height: 34px;
   text-align: center;
   overflow: hidden;
-  right: 145px;
-  bottom: 0;
   font-size: 22px;
   font-family: FZCuSong-B09S;
   font-weight: 400;
   color: #2A2A2A;
+  margin: 0 9px 0 0;
 }
 .otherJourney-footer .otherJourney-introduceFooter{
-  background: #CC0066;
+  /* background: #CC0066; */
 }
 .otherJourney-footer .edit_div{
   display: none;

src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/otherJourney.vue

@@ -8,7 +8,7 @@
     </div>
     <!-- <MasterMapList></MasterMapList> -->
     <!-- 副标题 -->
-    <subheading></subheading>
+    <subheading :TripColor="TripColor"></subheading>
     <!-- otherJourney-otherDetails 宿、食 景详情 -->
     <div class="otherJourney-otherDetails">
       <div class="otherJourney-details absolute z-index1">
@@ -46,9 +46,10 @@
       List8,
       List9,
     },
-    props: {
+    props: [
+      'TripColor'
       // FeatureData
-    },
+    ],
     data() {
       return {
         first: '印象日本独家使用京 都 车 站旁 的 京都 千 饭店 ~酒店房间 37 平 方公 尺！ 房型 多样 设 计， 京都千饭店外观为京町家的格子风格，非常引人注目。饭店以「Personal Comfort Hotel」为概念所打造，意思就是追求每个人入住时的舒适感。从有着庭院的大厅穿过以京町家的内庭长廊为主题所建的信道，便可看见用玻璃纱创作的艺术装置随风轻柔地飘动着。再往旁边一看，眼前只见充满开放感的挑高空间。有如通往神社寺庙大门般的大型阶梯充满了存在感。在柔和的光线包围下，一瞬间忘了自己是身处在建筑物之中。让人联想到京都传统建筑的内部装潢没有刻意的高调奢华，但连小细节都做得非常精致，散发出古都特有的风情。低調沉穩的寬敞客房。讓入住者可以從陽台或窗邊觀賞庭園的綠色景緻，同時享受頂級的休閒時光。 ',