行程

首页

<template>
  <div>
    <div class="top">
      <el-input v-model="search" placeholder="请输入搜索的目的地..." style="margin-top: 80px">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <div style="margin: 10px">
      <div style="display: flex;margin: 10px 0">
        <div style="flex: 1">
          <div style="border-right: 3px solid #63aec1; height: 20px; margin: 0 10px;float: left"></div>
          <span style="float: left;font-weight: bolder">我的</span>
        </div>
        <span style="color: #4481a3;font-size: 11px;margin-right: 30px">新增</span>
        <span style="color: #959494;font-size: 11px">更多</span>
      </div>
      <div class="mycards">
        <div v-for="(item, index) in items"  class="card_item">
          <div v-if="index < 4">
            <el-card>
              <div class="box">
                <div style="color: black;font-weight: bolder;">杭州-绍兴</div>
                <div style="border: 3px solid white;width: 90%;margin: 0 auto;height: 1px"></div>
                <div style="color: black;font-size: 11px">2020-4-3至2020-4-6</div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <div style="display: flex;margin: 10px 0">
        <div style="flex: 1">
          <div style="border-right: 3px solid #63aec1; height: 20px; margin: 0 10px;float: left"></div>
          <span style="float: left;font-weight: bolder">发现当地精选</span>
        </div>
        <span style="color: #959494;font-size: 11px">更多</span>
      </div>
      <el-carousel type="card" indicator-position="none">
        <el-carousel-item v-for="(item,index) in items" :key="item.id" style="background-color: white">
          <div v-if="index < 6">
            <div style="border: 1px solid red;width: 100%;height: 100px"></div>
            <div style="font-size: 13px;font-weight: bolder;margin-top: 10px">{{item.title}}</div>
            <div style="display: flex">
              <el-avatar :src="item.user.avatar"></el-avatar>
              <span style="line-height: 40px;font-size: 12px;margin-left: 10px">{{item.user.username}}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'travelIndex',
    data() {
      return {
        search: '',
        location: '杭州',
        items: [
          {
            id: 1,
            title: '杭州3日游',
            user: {
              id: 1,
              username: '王二小',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            }
          },
          {
            id: 2,
            title: '杭州3日游',
            user: {
              id: 1,
              username: '王二小',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            }
          },
          {
            id: 3,
            title: '杭州3日游',
            user: {
              id: 1,
              username: '王二小',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            }
          },
          {
            id: 4,
            title: '杭州3日游',
            user: {
              id: 1,
              username: '王二小',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            }
          },
          {
            id: 5,
            title: '杭州3日游',
            user: {
              id: 1,
              username: '王二小',
              avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            }
          }
        ],
        list:[1,1,1,1],
      }
    }
  }
</script>
<style>
  #app{
    margin-top: 0;
  }
  .top{
    width: 100%;
    height: 130px;
    border: 1px solid black;
  }
  .el-input-group{
    width: 70%;
  }
  .el-input__inner{
    height: 30px;
  }
  .el-carousel__container{
    height: 200px;
  }
  .mycards{
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card_item{
    flex: 1;
    width: 49%;
    min-width: 49%;
    max-width: 49%;
    margin-bottom: 10px;
  }
  .el-card__body{
    padding: 20px 0;
    background: url('../../assets/bg.jpg') no-repeat;
  }
  .box{
    padding: 20px 10px;
    background-color: white;
    opacity: 0.6;
    width: 70%;
    margin: 0 auto;
  }

</style>

siteList

<template>
  <div>
      <div class="top">
        <div style="padding: 20px 10px 10px">
          <div style="display: flex;color: white">
            <div><i class="el-icon-arrow-left"></i></div>
            <div style="margin: 0 auto">XX景点</div>
          </div>
          <el-input v-model="text" placeholder="景点/地区..." prefix-icon="el-icon-search">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </div>
      <div class="content">
        <div v-for="item in items">
          <el-card style="display: flex">
            <el-image :src="item.picture" style="width: 80px;height: 80px">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div style="margin-left: 10px;position: relative;width: 76%">
              <div style="text-align: left;font-weight: bold;margin-bottom: 5px">
                {{item.name}}
                <el-tag type="warning" effect="plain" v-if="!!item.type">{{item.type}}</el-tag>
                <el-tag type="danger" effect="plain" v-if="!!item.type">{{item.money}}</el-tag>
              </div>
              <div style="display: flex">
                <el-rate v-model="item.rate" disabled show-score text-color="#ff9900" score-template="{value}" style="float: left"></el-rate>
                <div style="margin-left: 100px;">
                  <div v-if="item.status === 0"><el-button type="primary" icon="el-icon-plus" circle plain></el-button></div>
                  <div v-else><el-button type="warning" icon="el-icon-delete" circle plain></el-button></div>
                </div>
              </div>
              <div style="color: #959494;font-size: 12px;position: absolute;bottom: 0">{{item.address}}</div>
            </div>
          </el-card>
        </div>
      </div>
  </div>

</template>
<script>
  export default {
    data() {
      return {
        items: [
          {
            name: '台儿庄古城',
            picture: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            rate: 4.9,
            money: '￥145',
            type: '5A景区',
            address: '山东省枣庄市台儿庄区华兴路东段',
            status: 0
          },
          {
            name: '大佛寺',
            picture: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            rate: 3.8,
            star: 5,
            address: '上海浦东新区南六公路178号',
            status: 1
          },
          {
            name: '大佛寺',
            picture: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            rate: 3.8,
            star: 5,
            address: '上海浦东新区南六公路178号'
          },
          {
            name: '大佛寺',
            picture: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            rate: 3.8,
            star: 5,
            address: '上海浦东新区南六公路178号'
          },
          {
            name: '大佛寺',
            picture: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            rate: 3.8,
            star: 5,
            address: '上海浦东新区南六公路178号'
          },
          {
            name: '大佛寺',
            picture: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            rate: 3.8,
            star: 5,
            address: '上海浦东新区南六公路178号'
          },
          {
            name: '大佛寺',
            picture: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            rate: 3.8,
            star: 5,
            address: '上海浦东新区南六公路178号'
          },
        ],
        text: ''
      }
    },
    created() {
      //获取items
    },
    methods: {
      search: function () {
        this.$message.info(this.text);
      }
    }
  }
</script>
<style>
  #app{
    margin-top: 0px;
  }
  body{
    background-color: #eaeaea;
    margin: 0;
  }
  .el-input-group{
    width: 96%;
    margin-top: 10px;
  }
  .el-input__inner{
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon{
    line-height: 30px;
  }
  .el-card__body{
    padding: 10px;
    display: flex;
    width: 100%;
  }
  .el-tag{
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
  }
  .top{
    background-color: #63aec1;
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
  }
  .content{
    position: absolute;
    margin-top: 100px;
    width: 100%;
    height: 570px;
    overflow: scroll;
    bottom: 0;
  }
</style>

travelList

<template>
  <div>
      <div class="top">
        <div style="padding: 20px 10px 10px">
          <div style="display: flex;color: white;align-items: center">
            <div><i class="el-icon-arrow-left"></i></div>
            <div style="margin: 0 auto">{{title}}</div>
            <div><el-button type="primary" icon="el-icon-plus" circle plain></el-button></div>
          </div>
        </div>
      </div>
      <div class="content">
        <div v-for="item in items">
          <div @click="intoOne(item.id)">
            <el-card style="display: flex">
              <div class="box">
                <div style="color: black;font-weight: bolder;display: flex">
                  <div style="display: flex;margin: 0 auto">
                    {{item.cities[0]}}
                    <div v-for="(city, index) in item.cities">
                      <div v-if="index > 0">
                        -{{city}}
                      </div>
                    </div>
                  </div>
                </div>
                <div style="border: 3px solid white;width: 90%;margin: 0 auto;height: 1px"></div>
                <div style="color: black;font-size: 11px">{{formatDate(item.st)}}至{{formatDate(item.et)}}</div>
              </div>
            </el-card>
          </div>

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

</template>
<script>
  export default {
    data() {
      return {
        title: '我的行程',
        items: [
          {
            id: 1,
            cities: ['上海','杭州'],
            st: 1589904000,
            et: 1590076800,
            createTime: 1589817600,
          }
        ],
        text: ''
      }
    },
    created() {
      //获取items
    },
    methods: {
      search: function () {
        this.$message.info(this.text);
      },
      formatDate: function (time) {
        var timer = new Date(time * 1000);
        var year = timer.getFullYear();
        var month = timer.getMonth() + 1;
        var date = timer.getDate();
        // var hour = time.getHours();
        // var minute = time.getMinutes();
        // var second = time.getSeconds();
        // return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        return year + "-" + month + "-" + date;
      },
      intoOne: function (id) {
        this.$message.info('' +id);
      }
    }
  };

  // function intoList(type) {
  //   if (type === 0) {
  //     vm.type = 0;
  //     vm.title = '我的行程';
  //   } else {
  //     vm.type = 1;
  //     vm.title = '热门行程';
  //   }
  // }

</script>
<style>
  #app{
    margin-top: 0px;
  }
  body{
    background-color: #eaeaea;
    margin: 0;
  }
  .el-input-group{
    width: 96%;
    margin-top: 10px;
  }
  .el-input__inner{
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon{
    line-height: 30px;
  }
  .el-card__body{
    padding: 10px;
    display: flex;
    width: 100%;
  }
  .el-tag{
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
  }
  .top{
    background-color: #63aec1;
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
  }
  .content{
    position: absolute;
    width: 100%;
    height: 600px;
    overflow: scroll;
    bottom: 0;
  }
  .card_item{
    flex: 1;
    width: 49%;
    min-width: 49%;
    max-width: 49%;
    margin-bottom: 10px;
  }
  .el-card__body{
    padding: 20px 0;
    background: url('../../assets/bg.jpg') no-repeat;
  }
  .box{
    padding: 20px 10px;
    background-color: white;
    opacity: 0.6;
    width: 70%;
    margin: 0 auto;
  }
</style>