"组件拆分"

zuozhengqing

2023-09-25 9b1e7a581891d869c8677366bcdc7f7f722fe27b

 src/views/goodsCard/index.vue

File was renamed from src/components/goodsCard/goodsCard.vue
@@ -25,7 +25,7 @@
          </div>
          <div class="project">
            <ul>
              <div>产品特点</div>
              <div style="margin-top: 50px">产品特点</div>
              <div >
                <li v-for="(item1, index1) in item.trait" :key="index1">
                  {{ item1 }}
@@ -34,59 +34,6 @@
            </ul>
          </div>
        </div>
        <!-- <div v-show="item.goodsRightShow === 2" class="goods_card_tab">
          <div class="pane_top">
            <el-button @click="tab1">智慧终端系列1</el-button>
            <el-button @click="tab2">智慧终端系列2</el-button>
          </div>
          <el-carousel trigger="click" arrow="never" ref="carousel">
            <el-carousel-item
              v-for="(pageItem, pageIndex) in item.series"
              :key="pageIndex"
            >
              <div class="pane_box_wrap">
                <div class="pane_left">
                  <p>{{ pageItem.goodsVersions }}</p>
                  <p class="tinge" style="color: #999">
                    {{ pageItem.introduce }}
                  </p>
                  <br />
                  <el-button>立即咨询</el-button>
                  <el-button>立即购买</el-button>
                  <div></div>
                  <h4>特点</h4>
                  <ul>
                    <div style="display: flex; flex-wrap: wrap">
                      <li
                        v-for="(item2, index2) in pageItem.trait"
                        :key="index2"
                      >
                        {{ item2 }}
                      </li>
                    </div>
                  </ul>
                  <h4>配置</h4>
                  <ul>
                    <li
                      v-for="(item3, index3) in pageItem.Configure"
                      :key="index3"
                    >
                      {{ item3 }}
                    </li>
                  </ul>
                </div>
                <div class="pane_right">
                  <img
                    :src="
                      require(`../../../public/image/home/projectImg/${pageItem.imgSrc}`)
                    "
                    alt=""
                  />
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div> -->

        <div
          v-show="item.goodsRightShow === 2"
@@ -94,148 +41,51 @@
        >
          <div class="right boot">
            <div class="top">
              <div>智慧终端系列1</div>
              <div>智慧终端系列1</div>
              <div @click="tab1">智慧终端系列1</div>
              <div @click="tab2">智慧终端系列2</div>
            </div>
            <el-carousel 
            trigger="click"
            ref="carouselpage"
            arrow="never">
              <el-carousel-item v-for="(itemPage,indexpage) in terminalData" :key="indexpage" >
            <h2>
              通过在每一个工序的设备或机台合适位置，安装触摸智能终端设备，用于将排产任务下发至每一个智能终端屏幕
              {{itemPage.info}}
            </h2>
            <div class="button">
              <div class="go">立即购买</div>
              <div class="in">立即咨询</div>
            </div>
            <div style="display:flex;align-items:center;justify-content:space-between">
            <div class="project">
            <ul >
              <div style="color: #FA640A;">产品优势</div>
              <li>建立设备台账、资产档案，掌握设备整个周期的动态信息</li>
              <li>
                收集设备使用过程中的各种信息数据，自动汇总运算，生成各类专业的设备管理报表
              </li>
              <div style="margin-top: 37px;color: #FA640A;">配置</div>
              <li>英特尔 志强 Silver 4114 10核处理器 x 2</li>
              <li>64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储</li>
              <li>千兆 LAN x 4</li>
            </ul>
                <div style="color: #fa640a" >产品优势</div>
                <li v-for="(advantage,advantages) in itemPage.advantage" :key="advantages">{{advantage}}</li>
            
              
          </div>
          </div>
        </div>

        <!-- <div v-show="item.goodsRightShow === 2" class="goods_card_tab">
          <div class="pane_top">
            <el-button @click="tab1">智慧终端系列1</el-button>
            <el-button @click="tab2">智慧终端系列2</el-button>
          </div>
          
          <el-carousel trigger="click" arrow="never" ref="carousel">
            <el-carousel-item
              v-for="(pageItem, pageIndex) in item.series"
              :key="pageIndex"
            >
              <div class="pane_box_wrap">
                <div class="pane_left">
                  <p>{{ pageItem.goodsVersions }}</p>
                  <p class="tinge" style="color: #999">
                    {{ pageItem.introduce }}
                  </p>
                  <br />
                  <el-button>立即咨询</el-button>
                  <el-button>立即购买</el-button>
                  <div></div>
                  <h4>特点</h4>
                  <ul>
                    <div style="display: flex; flex-wrap: wrap">
                      <li
                        v-for="(item2, index2) in pageItem.trait"
                        :key="index2"
                      >
                        {{ item2 }}
                      </li>
                    </div>
                  </ul>
                  <h4>配置</h4>
                  <ul>
                    <li
                      v-for="(item3, index3) in pageItem.Configure"
                      :key="index3"
                    >
                      {{ item3 }}
                    </li>
                <div style="margin-top: 37px; color: #fa640a">配置</div>
                <li v-for="disposition in itemPage.disposition " :key="disposition">{{disposition}}</li>
                  </ul>
                </div>
                <div class="pane_right">
                  <img
                    :src="
                      require(`../../../public/image/home/projectImg/${pageItem.imgSrc}`)
                    "
                    alt=""
                  />
            <div style="width:500px;height:300px;margin-right:50px;">
              <img :src="require(`../../../public/image/home/${itemPage.imgSrc}`)" alt="" style="width:500px">
                </div>
              </div>
            
            </el-carousel-item>
          </el-carousel>

          
        </div> -->
          </div>
        </div>

        <div
          v-show="item.goodsRightShow === 3"
          class="goods_card_right goods_ai"
        >
          <!-- <GoodsInfo :goodsAiInfo="goodsAiInfo"></GoodsInfo> -->
        </div>
        <!-- 管理中心 -->
        <!-- <div
          v-show="item.goodsRightShow === 4"
          class="goods_card_right management"
        >
          <el-card shadow="hover" v-for="(i, v) in manageInfo" :key="v">
            <div class="box_card_top">
              <h4>{{ i.classify }}</h4>
              <p>{{ i.classifyTitle }}</p>
              <ul>
                <div style="display: flex; flex-wrap: wrap">
                  <div>功能描述</div>
                  <li v-for="(q, qIndex) in i.features" :key="qIndex">
                    {{ q }}
                  </li>
                </div>
              </ul>
            </div>
            <div class="box_card_bottom">
              <p class="new_price_box">
                <span>{{ i.currency }}</span>
                <span>{{
                  i.newPrice.substring(0, i.newPrice.indexOf("."))
                }}</span>
                <span
                  >.{{
                    i.newPrice.substring(i.newPrice.indexOf(".") + 1)
                  }}</span
                >
                <span> /{{ i.dateType }}</span>
                <span> 起</span>
              </p>
              <p class="old_price_box">
                <del>
                  <span>{{ i.currency }}</span>
                  <span>{{ i.oldPrice }}</span>
                </del>
              </p>
            </div>
            <div class="box_card_bottom bottom_show">
              <el-button>立即购买</el-button>
            </div>
          </el-card>
        </div> -->
        ></div>
      </div>
    </template>
  </div>
</template>

<script>
import GoodsInfo from "./goodsInfo/goodsInfo.vue";
export default {
  // props: {},
  props: ["cardData"],
@@ -244,8 +94,20 @@
      activeName: "first",
      goodsRightShow: false, //是否展示右侧信息栏，false:tab页不显示
      isBtnClass: false,
      // goodsAiInfo: this.cardData[3].cards, //子组件卡片数据
      // manageInfo: this.cardData[4].cards,
      terminalData:[
        {
          info:"通过在每个工序的设备或机台合适位置，安装触摸智能终端设备，用于将排产任务下发至每一个智能终端屏幕。",
          advantage:["建⽴设备台账、资产档案，掌握设备整个周期的动态信息","收集设备使⽤过程中的各种信息数据，⾃动汇总运算，生成各类专业的设备管理报表"],
          disposition:["英特尔 志强 Silver 4114 10核处理器 x 2","64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储","千兆 LAN x 4"],
          imgSrc:"Group.png"
        },
        {
          info:" 搭载两颗高性能志强处理器，可提供高达64T的凶猛算力",
          advantage:[" Server系列，具备单台与集群服务","支持算力虚拟化管控，高稳定性单机热备"],
          disposition:["英特尔 志强 Silver 4114 10核处理器 x 2","64GB 内存 (16GB x 4) + 480GB SSD 存储 + 8TB HDD 存储","千兆 LAN x 4"],
          imgSrc:"crm.png"
        }
      ]
    };
  },
  computed: {},
@@ -254,16 +116,15 @@
  watch: {},
  methods: {
    tab1() {
      console.log(this.$refs.carousel[2], "xxx");
      this.$refs.carousel[2].setActiveItem(0);
      // console.log(this.$refs, "xxx");
      this.$refs.carouselpage[3].setActiveItem(0);
      
    },
    tab2() {
      this.$refs.carousel[2].setActiveItem(1);
      this.$refs.carouselpage[3].setActiveItem(1);
    },
  },
  components: {
    GoodsInfo,
  },
  components: {},
};
</script>

@@ -301,13 +162,13 @@
  }
}
::v-deep .el-carousel {
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  // border-right: 1px solid #e1e1e1;
  // border-bottom: 1px solid #e1e1e1;
  .el-carousel__indicators {
    display: none;
  }
  .el-carousel__container {
    height: 360px;
    height: 500px;
  }
  .pane_box_wrap {
    display: flex;
@@ -433,11 +294,6 @@
    position: relative;
    left: 0;
    top: 0;
    // background-image: url(../../../public/image/home/编组\ 10@3x.png);
    // background-size: 520px 280px;
    // background-repeat: no-repeat;
    // background-position-x: right;
    // background-position-y: bottom;

    h1 {
      font-size: 20px;
@@ -458,14 +314,20 @@
      div {
        width: 120px;
        height: 44px;
        background: #ff680d;
        font-size: 16px;
        line-height: 44px;
        color: #fff;
        text-align: center;
        border: 2px solid #ff680d;
        cursor: pointer;
        background: #ff680d;
        color: #fff;
        // background: #fff;
        // color: #ff680d;
      }
      // div:hover{
      //   background: #ff680d;
      //   color: #fff;
      // }
      .in {
        background: #fff;
        color: #ff680d;
@@ -504,7 +366,6 @@
          background-repeat: no-repeat;
          background-position-x: left;
          background-position-y: top;
          // list-style-image: url(../../../public/image/home/对勾.png);
        }
        li:hover {
          color: #000 !important;
@@ -676,13 +537,21 @@
}
.goods_card:nth-of-type(1){
  .goods_card_right{
    background-image: url(../../../public/image/home/编组\ 10@3x.png);
    background-size: 718.2px 453.6px;
    background-repeat: no-repeat;
    background-position: 90% 60%;
  }
}
.goods_card:nth-of-type(2) {
  .goods_card_right {
    background-image: url(../../../public/image/home/crm.png);
    background-size: 576px 327px;
    background-repeat: no-repeat;
    background-position: 90% 60%;
  }
}
.goods_card:nth-of-type(2){
.goods_card:nth-of-type(3) {
  .goods_card_right {
    background-image: url(../../../public/image/home/wms.png);
    background-size: 576px 327px;
@@ -812,7 +681,6 @@
        background-repeat: no-repeat;
        background-position-x: left;
        background-position-y: top;
        // list-style-image: url(../../../public/image/home/对勾.png);
      }
      li:hover {
        color: #000 !important;
@@ -832,12 +700,12 @@
    }
  }
}
.boot {
  background-image: url(../../../public/image/home/Group.png);
  background-color: #f9f9f8;
  background-size: 533.1px 324px;
  background-position: 90% 55%;
}
// .boot {
//   background-image: url(../../../public/image/home/Group.png);
//   background-color: #f9f9f8;
//   background-size: 533.1px 324px;
//   background-position: 90% 55%;
// }
.card_height {
  height: 600px !important;
  .right {