实习日志-06

本节：记录一下我最近写的一些功能。

一、使用element组件写跑马灯，切换轮播图会切换对应的文字。

div：

 点击的标签

 联动的轮播图

 联动的文字

方法，标签点击切换的方法

 这里也是赋值指针的

绑定了了轮播图这里的 carousel

 全部轮播图代码：

<!--div内容-->
<div style="padding-top:73px;">
            <!-- 控制按钮 案例展示 -->
            <div style="display: flex;width:500px;margin: 0px auto;">
                <template v-for="(item4,index) in showList">
                    <div>
                        <div @click="chooseCard(item4.id,index)" :class="active == index ? 'yangshi2' : 'casezhangshi'">
                            {{item4.title}}<div :class="active == index ? 'line3' : 'line'">
                            </div>


                        </div>
                    </div>
                </template>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12	col-sm-12	col-md-12	col-lg-12">
                <!-- 案例展示 轮播图 -->
                <template>
                    <el-carousel :interval="4000" type="card" ref="carousel" style="height: 40vw;margin-top:15px"
                        @change="carouselBtn">
                        <el-carousel-item v-for="(item2,index2) in showList" :key="item2.id"
                            style="height: 40vw;width: 50vw;">
                            <img alt="" :src="'http://pinnuo.bifnet.com/'+item2.origin_path" @click=""
                                style="width: 100vw;height: 50vw;object-fit:cover">
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </div>
        </div>

        <!-- 对应案例的内容 -->
        <div class="row">
            <div class="casefenxi  col-xs-12 col-sm-12 col-md-12 col-lg-12">案例分析</div>
            <template v-if="showList[active]">
                <div class="casefenxiFont  col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    {{showList[active].abstract}}
                    <!-- {{strategyList[caseIndex]}}{{caseIndex}} -->
                </div>
            </template>
        </div>

方法代码：

  // 案例轮播图展示
                chooseCard(id, index) {
                    // 这里id 是 8 越界了
                    this.active = index;
                    this.$refs.carousel.setActiveItem(index);
                },
                carouselBtn(e) {
                    this.active = e;
                },

//接口复制

                lunbotuFirst() {
                    var that = this;
                    // 将那个变量，放到这里，一定要写的
                    axios.get('http://pinnuo.bifnet.com/index.php/api/index/index')
                        // 获取服务器的链接
                        .then(function (res) {
                            //那个获取输出
                            // 输出这个
                            that.lunbotuList = JSON.parse(JSON.stringify(res.data.data.banner));
                            that.videoOne = JSON.parse(JSON.stringify(res.data.data.brand));
                            that.videoOne = 'http://pinnuo.bifnet.com' + that.videoOne[0].origin_path;
                            that.showList = res.data.data.shown;
                          
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                },

二、点击切换成对应的文字和图片

div

div代码:

 <!-- 定制攻略 -->
                <div style="opacity: 1 !important;" class=" col-xs-12 col-sm-12 col-md-12 col-lg-12">
//标签
                    <div class="casefenxituwen row">
                        <div class="caseWenBox ">
                            <div class="caseWen" v-for="(item,index) in strategyList" @click="caseClick(item, index)">
                                <div :class="caseIndex == index ? 'lizi2' : 'lizi'">{{item.title}}<div
                                        :class="caseIndex == index ? 'line3' : 'line'">

                                    </div>
                                </div>
                            </div>
                        </div>
//图片
                        <div  style="opacity: 1 !important;display: flex;">
                            <div>
                                <transition v-if="strategyList[caseIndex]">
                                    <p><img :src="'http://pinnuo.bifnet.com'+strategyList[caseIndex].origin_path"
                                            class="caseTu "></p>

                                </transition>
                            </div>
                        </div>
                    </div>
                </div>
//内容
                <template v-if="strategyList[caseIndex]">
                    <div class="gonglueIntro" style="opacity: 1 !important;">
                        {{strategyList[caseIndex].abstract}}</div>
                </template>
            </div>

 方法：

//要在data里面定义：caseIndex :0  

caseClick(item, index) {
                    this.caseIndex = index
  },

三、一点击，从左侧弹出一个动画效果。

 div：div加一个点击事件 

底部的内容预先写好，v-if绑定一个变量，那个变量预先设置为false并不显示。 

方法，一点击为真就显示了，

然后给底部的内容加一个动画效果样式

.footer2 {
       width: 100%;
       height: 180px;
       background: #17140f;
       text-align: center;
       z-index: 300;
       position: fixed;
       bottom: 0px;
       animation-name: example;
       animation-duration: 0.5s;
       animation-fill-mode: forwards;

   }

   @keyframes example {
       from {
           left: 100%;
       }

       to {

           left: 0px;
       }
   }

四、触摸之后，改变图片颜色。实际上就是两个图片的切换。

 

五、动图录制软件：ScreenToGif