综合运用Sass和Vue.js完成登录页/注册页/首页/商家详情页

在现代前端开发中，Sass和Vue.js是两个非常重要的技术工具。Sass作为CSS的预处理器，能够增强CSS的功能，提供变量、嵌套规则、混入（mixins）等特性，而Vue.js作为一个流行的前端框架，具有数据驱动、组件化等特性，能够快速构建响应式的用户界面。本课件将结合Sass和Vue.js，讲解如何开发登录页、注册页、首页以及商家详情页。

1. 项目概述

本项目通过使用Sass进行样式设计，Vue.js进行界面交互，完成一个电商平台的前端页面，包括以下部分：

登录页
注册页
首页
商家详情页

2. 登录页（Login Page）

2.1 页面设计

登录页是用户进入平台的入口，设计时需要考虑简洁性和易用性。

2.1.1 HTML结构

<template>
  <div class="login-container">
    <form @submit.prevent="handleLogin">
      <h2>登录</h2>
      <div class="input-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="input-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
      <p class="register-link">
        没有账户？ <a href="/register">注册</a>
      </p>
    </form>
  </div>
</template>

2.1.2 Vue.js逻辑

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      // 处理登录逻辑
      if (this.username && this.password) {
        console.log('登录成功');
      } else {
        alert('请输入用户名和密码');
      }
    }
  }
};
</script>

2.1.3 Sass样式

// login.scss
.login-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  .input-group {
    margin-bottom: 20px;
    
    label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
    }

    input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  }

  button {
    width: 100%;
    padding: 10px;
    background-color: #4caf50;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #45a049;
    }
  }

  .register-link {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    
    a {
      color: #4caf50;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

3. 注册页（Register Page）

3.1 页面设计

注册页允许用户创建新账户，通常需要输入用户名、密码、确认密码等字段。

3.1.1 HTML结构

<template>
  <div class="register-container">
    <form @submit.prevent="handleRegister">
      <h2>注册</h2>
      <div class="input-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="input-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <div class="input-group">
        <label for="confirmPassword">确认密码</label>
        <input type="password" id="confirmPassword" v-model="confirmPassword" required />
      </div>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

3.1.2 Vue.js逻辑

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: ''
    };
  },
  methods: {
    handleRegister() {
      // 处理注册逻辑
      if (this.password === this.confirmPassword) {
        console.log('注册成功');
      } else {
        alert('密码不一致');
      }
    }
  }
};
</script>

3.1.3 Sass样式

// register.scss
.register-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  .input-group {
    margin-bottom: 20px;
    
    label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
    }

    input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  }

  button {
    width: 100%;
    padding: 10px;
    background-color: #4caf50;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #45a049;
    }
  }
}

4. 首页（Home Page）

4.1 页面设计

首页展示平台的主内容，如商品推荐、热门商家等。

4.1.1 HTML结构

<template>
  <div class="home-container">
    <h1>欢迎来到我们的平台</h1>
    <div class="product-list">
      <div class="product-item" v-for="product in products" :key="product.id">
        <img :src="product.image" alt="product.name" />
        <p>{{ product.name }}</p>
      </div>
    </div>
  </div>
</template>

4.1.2 Vue.js逻辑

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', image: 'productA.jpg' },
        { id: 2, name: '商品B', image: 'productB.jpg' }
      ]
    };
  }
};
</script>

4.1.3 Sass样式

// home.scss
.home-container {
  padding: 20px;
  background-color: #fff;

  .product-list {
    display: flex;
    flex-wrap: wrap;

    .product-item {
      width: 150px;
      margin: 10px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;

      img {
        width: 100%;
        height: auto;
        border-radius: 4px;
      }

      p {
        margin-top: 10px;
        font-size: 14px;
      }
    }
  }
}

5. 商家详情页（Merchant Detail Page）

5.1 页面设计

商家详情页展示商家的详细信息，如名称、商品列表等。

5.1.1 HTML结构

<template>
  <div class="merchant-container">
    <h1>{{ merchant.name }}</h1>
    <p>{{ merchant.description }}</p>
    <div class="product-list">
      <div class="product-item" v-for="product in merchant.products" :key="product.id">
        <img :src="product.image" alt="product.name" />
        <p>{{ product.name }}</p>
      </div>
    </div>
  </div>
</template>

5.1.2 Vue.js逻辑

<script>
export default {
  data() {
    return {
      merchant: {
        name: '商家A',
        description: '商家A的描述信息',
        products: [
          { id: 1, name: '商品A', image: 'productA.jpg' },
          { id: 2, name: '商品B', image: 'productB.jpg' }
        ]
      }
    };
  }
};
</script>

5.1.3 Sass样式

// merchant.scss
.merchant-container {
  padding: 20px;
  background-color: #f9f9f9;

  h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  p {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .product-list {
    display: flex;
    flex-wrap: wrap;

    .product-item {
      width: 150px;
      margin: 10px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;

      img {
        width: 100%;
        height: auto;
        border-radius: 4px;
      }
      p {
        margin-top: 10px;
        font-size: 14px;
      }
    }
  }
}