qaz

下载：https://download.csdn.net/download/qq_41560180/11012405

https://download.csdn.net/download/lindanzx/11636569

城市景点：https://www.cnblogs.com/zxf100/p/11645957.html

用户信息修改：

<template>
  <div>
    <el-page-header @back="go(-1)" content="个人信息"></el-page-header>
    <div style="margin-top: 10px;background-color: white">
      <div style="display: flex;padding: 10px 20px">
        <div style="flex: 1;text-align: left">头像</div>
        <el-avatar :src="item.avatar"></el-avatar>
      </div>
      <div style="border-bottom: 1px solid #eaeaea; width: 90%;margin: 0 auto"></div>
      <div style="display: flex;padding: 10px 20px">
        <div style="flex: 1;text-align: left">用户名</div>{{item.username}}
      </div>
      <div style="border-bottom: 1px solid #eaeaea; width: 90%;margin: 0 auto"></div>
      <div style="display: flex;padding: 10px 20px">
        <div style="flex: 1;text-align: left">邮箱</div>{{item.email}}
      </div>
      <div style="border-bottom: 1px solid #eaeaea; width: 90%;margin: 0 auto"></div>
      <div style="display: flex;padding: 10px 20px">
        <div style="flex: 1;text-align: left">电话</div>{{item.tel}}
      </div>
    </div>
    <div>
      <div style="margin-top: 10px;background-color: white">
        <div style="display: flex;padding: 10px 20px">
<!--          <div style="flex: 1;text-align: left">修改密码</div>-->
<!--          <i class="el-icon-arrow-right"></i>-->
          <el-collapse style="width: 100%">
            <el-collapse-item title="修改密码">
              <div style="display: flex;padding: 10px 20px">
                <el-form labelPosition="right" label-width="70px">
                  <el-form-item label="原密码">
                    <el-input v-model="oldPsw"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码">
                    <el-input v-model="newPsw"></el-input>
                  </el-form-item>
                  <el-button type="success" plain @click="changePsw">确认修改</el-button>
                </el-form>
              </div>
            </el-collapse-item>

          </el-collapse>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'accountIndex',
    data() {
      return {
        canEdit: false,
        item: {
          username: '王小虎',
          password: '123',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          email: '1360062684@qq.com',
          tel: '13757565688',
        },
        oldPsw: '',
        newPsw: ''
      }
    },
    methods: {
      changePsw: function () {
        if (this.oldPsw.length === 0 || this.newPsw.length === 0)
          this.$message({
            message: "密码不得为空",
            type: "error"
          });
        else
          this.$message({
            message: "ok",
            type: "success"
          });
      }
    }
  }

</script>
<style>
  body{
    background-color: #eaeaea;
  }
  .text{
    float: left;
  }
  .el-page-header{
    background-color: #2c3e50;
    color: white;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
  }
  .el-page-header__content{
    color: white;
  }

</style>

旅行首页：

<template>
  <div style="margin: 10px">
    <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="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 in items" :key="item.id" style="background-color: white">
        <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>
      </el-carousel-item>
    </el-carousel>

    <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>
    <div style="display: flex">
      <div v-for="item in items"  class="outside">
        <div class="inside">
          <el-card style="border: 1px solid red;">

          </el-card>
        </div>

      </div>
    </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>
  .top{
    width: 100%;
    height: 130px;
    border: 1px solid black;
  }
  .el-input-group{
    width: 70%;
  }
  .el-input__inner{
    height: 30px;
  }
  .el-carousel__container{
    height: 200px;
  }
  .outside{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-decoration: none;
  }
  .inside{
    width: 45%;
    height: 100px;
  }
  .outside:after{
    content: "";
    height: 0;
    width: 45%;
  }
</style>

旅游景点爬虫数据：

去哪网旅游景点数据集合（3w）

全域旅游大数据分析平台.docx